VueJS TypeError：无法读取未定义的属性“ className”

Question

我正在尝试构建菜单，突出显示用户当前所在的标签/页面，添加颜色类别，并使用JavaScript更新活动链接。这是我的模板：

<div class="w3-bar w3-black">
  <button
    class="w3-bar-item w3-button tablink w3-red"
    onclick="openCity(event,'London')"
  >
    London
  </button>
  <button
    class="w3-bar-item w3-button tablink"
    onclick="openCity(event,'Paris')"
  >
    Paris
  </button>
  <button
    class="w3-bar-item w3-button tablink"
    onclick="openCity(event,'Tokyo')"
  >
    Tokyo
  </button>
</div>

<div id="London" class="w3-container w3-border city">
  <h2>London</h2>
  <p>London is the capital city of England.</p>
</div>

<div id="Paris" class="w3-container w3-border city" style="display:none">
  <h2>Paris</h2>
  <p>Paris is the capital of France.</p>
</div>

<div id="Tokyo" class="w3-container w3-border city" style="display:none">
  <h2>Tokyo</h2>
  <p>Tokyo is the capital of Japan.</p>
</div>

我在“方法”中有这个javascript代码：

methods: {
    openCity: function(evt, cityName) {
      var i, x, tablinks;
      x = document.getElementsByClassName("city");
      for (i = 0; i < x.length; i++) {
        x[i].style.display = "none";
      }
      tablinks = document.getElementsByClassName("tablink");
      for (i = 0; i < x.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" w3-red", "");
      }
      document.getElementById(cityName).style.display = "block";
      evt.currentTarget.className += " w3-red";
    }
  }

但是我在控制台中收到此错误：'TypeError：无法读取未定义的属性'className'，并且按钮没有将其突出显示。 希望你能帮助我，谢谢！

Answer 1

您传递的是event而不是$event，我认为这就是为什么它没有定义的原因。另外，您还有很多不必要的代码。我清理了，请立即尝试：

HTML

<div class="w3-bar w3-black">
  <button
    v-for="city in cities"
    class="w3-bar-item w3-button tablink"
    @click="openCity($event, city)"
    :class="{ 
      'w3-red': city.name === selectedCity,
      'w3-black': city.name !== selectedCity 
    }"
  >
    {{city.name}}
  </button>
</div>

<div 
  v-for="city in cities" 
  :id="city.name" 
  class="w3-container w3-border city"
  :class="{ 
    'visible': city.name === selectedCity,
    'hidden': city.name !== selectedCity 
  }"
 >
  <h2>{{city.name}}</h2>
  <p>{{city.description}}</p>
</div>

脚本

data () {
  return {
    selectedCity: 'London',
    cities: [
      { 
        name: 'London', 
        description: 'London is the capital city of England'
      },
      { 
        name: 'Paris', 
        description: 'Paris is the capital of France',
      },
      { 
        name: 'Tokyo', 
        description: 'Tokyo is the capital of Japan',
      }
    ] 
  }
},
methods: {
  openCity (event, city) {
    this.selectedCity = city.name
  }
}

样式

.hidden {
  display: none
}

.visible {
  display: block
}

方法2

如果您不想使用CSS类来隐藏内容，则可以只使用v-show，而只会显示city.name === selectedCity所选择的城市：

<div 
  v-for="city in cities" 
  v-show="city.name === selectedCity"
  :id="city.name" 
  class="w3-container w3-border city"
 >
  <h2>{{city.name}}</h2>
  <p>{{city.description}}</p>
</div>