Yêu cầu thg 8 5, 2022 7:49 SA 136 0 1
  • 136 0 1
0

Code Vue vẫn chạy bình thường tại sao console lại đỏ ạ? :V

Chia sẻ
  • 136 0 1

Em đang code cái đổi ngôn ngữ theo router params locale nó vẫn chạy bình thường tuy nhiên nó báo các lỗi ở console là:

Error in render: "TypeError: Cannot read properties of undefined (reading 'home')"

Cannot read properties of undefined (reading 'home')

Ở giao diện chính nó sẽ dạng như sau...

<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"
            >
             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>

Ở phần Script xử lý như sau ạ:

<script>
export default {
  data() {
    return {
      active: null,
      activeLocale: null,
      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ệ",
        }
      },
    };
  },
  mounted(){
    if(this.$route.params.locale == null){
      this.activeLocale = 'vi'
    }
    else{
      this.activeLocale = this.$route.params.locale
    }
  },
  methods: {
     localised(key) { 
      return this.menu[this.activeLocale][key]
    },
  },
  }
};
</script>

Mong được chỉ giáo, em xin cảm ơn

1 CÂU TRẢ LỜI


Đã trả lời thg 8 5, 2022 7:52 SA
Đã được chấp nhận
+1

Chào bác lại là em đây =))). Thay vì bác để activeLocale = null sao bác k để luôn là activeLocale = 'vi' nhỉ. Bác thử xem có còn lỗi không 😄? Hoặc bác thử để phần logic đó vào created() thay vì mounted() xem sao nhưng em vẫn recommend cách mình set luôn activeLocale = 'vi'

Chia sẻ
Avatar Phạm Duy Vũ @binchanhkun99
thg 8 5, 2022 7:55 SA

Hay toá tròi, cảm ơn bác nhìu nhìu nhen ^^ dạo này chắc em ăn phải cơm tẩm đá rồi 😦

thg 8 5, 2022 8:00 SA

@binchanhkun99 mà khi bác đăng code lên thì trong phần ``` bác thêm chữ Javascript vào xem code sẽ được hightlight dễ đọc hơn nhiều ✌️ . Như hình bên dưới này bác.

Screenshot from 2022-08-05 14-59-49.png

Avatar Phạm Duy Vũ @binchanhkun99
thg 8 5, 2022 8:07 SA

@dangcq17 Vâng oke bác ơi, để tí em đăng bài khác bác nhớ vào trả lời xem nó có highlight chưa nhé bác :v

Viblo
Hãy đăng ký một tài khoản Viblo để nhận được nhiều bài viết thú vị hơn.
Đăng kí