Question

让我先写代码

<div class="block" data-toggle="tooltip" title="click to change the name of this button, and its actions" v-for="(button, button_index) in menus" @click="open_button_details(button_index)">
     <div v-if="button.showPicker"  @click="showPicker($event, button_index)">'hello'
     </div>
  </div>

我有一个带有多个按钮的数据对象数组，其showPicker属性为：

menus:
    [
    {
      "name": "Menu item 1",
      "trigger_type": null,
      "trigger_value": null,
                "remainingCount" : 30,
                "maxCount" : 30,
                "message": '',
                "hasError": false,
                "showPicker" : false
    },
    {
      "name": "Menu item 2",
      "trigger_type": null,
      "trigger_value": null,

显示选择器方法

showPicker : function(event, button_index){
        var _this = this.menus[button_index];
        _this.showPicker = !_this.showPicker;
    }

现在v-if仅运行一次。它显示了“你好”的文字＆＃39;当showPicker为真时。但是当将showPicker切换为false时，它不会消失。你能告诉我出了什么问题吗？

谢谢。

Answer 1

感谢神圣，解决方案是:key与v-for一起使用。看似没有:key v-for有时无法正常工作。

VUE Js V-IF切换不按预期工作

1 个答案: