Asked Friday, 3:07 a.m. 62 0 1
  • 62 0 1
+1

Đang làm chức năng dịch trong Vue thì em mắc phải lỗi này

Share
  • 62 0 1

Em đang tạo chức năng dịch cho trang web của mình, tuy nhiên nó bị lỗi, khi e sử dụng chức năng này trong thanh menu, nó vẫn hoạt động: Header.vue:

<div class="collapse navbar-collapse" id="navbarNavDropdown">
        <ul class="navbar-nav" id="menu">
          <div class="list-nav-item">
            <li>
              <a            
                >{{localised('home')}}</a
              >
            </li>
            <li class="nav-item">
              <a
                >{{localised('about')}}</a
              >
            </li>
            <li class="nav-item">
              <a
                >{{localised('newspaper')}}</a
              >
            </li>
            <li class="nav-item">
              <router-link
                class="nav-link rttr"
                :to="'/recruit' && '/recruit/vi'"
              >
                {{localised('recruit')}}
              </router-link>
            </li>
            <li class="nav-item">
                <a
                >{{localised('contact')}}</a
              >
            </li>
          </div>

          <li class="nav-item dropdown" id="language">
            <a
             id="navbarDropdownMenuLink"
              role="button"
              data-toggle="dropdown"
              aria-expanded="false"
            >
             b>VN</b>
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
              <a class="language-Viet row" href="/vi">
                  <b value="vi" >Tiếng Việt</b>
              </a>
              <a class="language-English row" href="/en">
                  <b value="en" >English</b>
              </a>
            </div>
          </li>
        </ul>
      </div>
<script>
 data() {
    return {
      active: null,
      activeLocale: "vi",
      menu: {
        en: {
          home: "Home",
          about: "About",
          newspaper: "Newspaper",
          recruit: "Recruit",
          contact: "Contact",
        },
        vi: {
          home: "Trang chủ",
          about: "Về chúng tôi",
          newspaper: "Tin tức",
          recruit: "Tuyển dụng",
          contact: "Liên hệ",
        },
      },
    };
  },
  methods: {
     localised(key) {
      return this.menu[this.$route.params.locale][key]
    },
   
  },
</script>

Tuy nhiên khi làm trên một component khác thì nó lại báo lỗi "method "localised" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option , or for class-based components, by initializing the property." Và đấy là trang carousel.vue e làm đang báo lỗi:

  <div class="carousel-inner">
      <div class="carousel-item active">
        <div class="slide1">
          <div class="container div-parent">
            <div class="slide-header-left">
              <div class="left-top">
                <img src="../assets/home/Rectangle 133.svg" alt="" />
                <h5>{{localised('titleGoStream')}}</h5>
              </div>
              <div class="slide-logo">
              </div>
              <h2>{{localised('nameProduct')}}</h2>
              <h3>
                {{localised('descriptionProduct')}}
              </h3>
              <div class="slide-logo">
                <button class="btn-discovery">
                  Khám phá ngay
                  <img
                    style="position: relative; left: 8px"
                    src="../assets/home/muiten.svg"
                    alt=""
                  />
                </button>
              </div>
            </div>
</template>

<script>
import "../assets/style.css";
import "../assets/boostrap.css";
import axios from "axios";
export default {
  data() {
    return {
      sliderhomes: [],
            slider: {
        en: {
          titleGoStream: "GoStream's products",
          nameProduct: "Facebook Fanpage management software",
          DescriptionProduct: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sed quam arcu. Praesent egestas.",
        },
        vi: {
         titleGoStream: "Sản phẩm của GoStream",
          nameProduct: "Phần mềm quản lý Fanpage Facebook",
          DescriptionProduct: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sed quam arcu. Praesent egestas.",
        },
      },
    };
  },
  mounted() {
    },
  method: {
     localised(key) {
      return this.slider[this.$route.params.locale][key]
    },
   
  },
};
</script>

Không biết em đang sai logic ở đâu ạ, mong các anh chị cao nhân chỉ giáo ạ ^^ Em cảm ơn nhiều

1 ANSWERS


Answered Friday, 3:10 a.m.
Accepted
0
methods: {
     localised(key) {
      return this.slider[this.$route.params.locale][key]
    },
   
  },

Do sai cú pháp method nó là methods bạn ui 😄

Share
Avatar Phạm Duy Vũ @binchanhkun99
Friday, 3:15 a.m.

U là chòi thanks ạ

0
| Reply
Share
Avatar Phạm Duy Vũ @binchanhkun99
Friday, 3:21 a.m.

mà giờ cái tự nhiên nó lỗi luôn còn báo lỗi kiểu: Error in render: "TypeError: Cannot read properties of undefined (reading 'home')" nữa là sao bác nhỉ :_)

0
| Reply
Share
Friday, 3:31 a.m.

@binchanhkun99 nó lỗi code trên hay dưới thê thế bác

0
| Reply
Share
Avatar Phạm Duy Vũ @binchanhkun99
Friday, 3:33 a.m.

@dangcq17 giờ nó lỗi cả 2 nơi bác ạ.. ủa nãy thằng menu vẫn chạy dịch bth tự nhiên cái nó k lấy đc cái object nữa hay sao ý bác ảo thiệc ._.

0
| Reply
Share
Friday, 3:35 a.m.

@binchanhkun99 bác check lại chỗ này xem nó đã lấy được en hoặc vi chưa

this.slider[this.$route.params.locale]
0
| Reply
Share
Avatar Phạm Duy Vũ @binchanhkun99
Friday, 4:03 a.m.

@dangcq17 à là do thằng router khi cái url ko /vi hc /en thì nó ko trả về gì cả bác ạ, bh em chưa biết viết điều kiện ntn như bth thì e sẽ check this.$route.params.locale == null thì sẽ cho nó là vi nhưng trường hợp này e chưa xử lý dc :_)

+1
| Reply
Share
Avatar Phạm Duy Vũ @binchanhkun99
Friday, 4:17 a.m.

:v à em làm đc rồi thanks bác support

0
| Reply
Share
Friday, 4:18 a.m.

@binchanhkun99 bác thêm if hoặc switch case để default là vi là được

0
| Reply
Share
Viblo
Let's register a Viblo Account to get more interesting posts.