时间戳

首页 > 解决方案 > Vuejs 使用带有哈希变量的 v-if

vue.js - Vuejs 使用带有哈希变量的 v-if

问题描述

我正在尝试将 v-if 与应该为真或假的哈希变量一起使用。

所以在jsvascript中，我有

  data: {
    seen: {},
    bicycles: [ ...data ...],
},

然后在创建时，我有自行车数组的长度，并使用自行车 ID 作为键将哈希中的一个项目设置为 false。

最后，

methods: {
    seeMe: function (event) {
        this.seen[event.target.id]  = !this.seen[event.target.id];
        console.log("LOGGING: you pressed " + event.target.id + " and seen value is now " + this.seen[event.target.id]);
        console.log("LOGGING: the hash is now " + JSON.stringify(this.seen));
   }
}

在我的html中

        <ul>
          <li v-for="bike in bicycles">
                {{ bike.id }}
                {{ bike.make }}
                {{ bike.model }}
                {{ bike.owner.userName }} 
                <button class="button-primary" v-bind:id="bike.id" v-on:click="seeMe">{{ bike.owner.userName }}</button>
                <p><span v-if="'seen[bike.id">{{ bike.owner.firstName}} {{ bike.owner.surName}}</span></p>
          </li>
        </ul>

这不起作用..

这是按下任何按钮之前的控制台输出

LOGGING: length is 4 
LOGGING: false when i is 1 
LOGGING: false when i is 2 
LOGGING: false when i is 3
LOGGING: false when i is 4

以及按下按钮 1、按钮 3、按钮 3 后的控制台输出

LOGGING: you pressed 1 and seen value is now true 
LOGGING: the hash is now {"1":true,"2":false,"3":false,"4":false} 
LOGGING: you pressed 3 and seen value is now true 
LOGGING: the hash is now {"1":true,"2":false,"3":true,"4":false} 
LOGGING: you pressed 3 and seen value is now false 
LOGGING: the hash is now {"1":true,"2":false,"3":false,"4":false}

所以哈希正在更新。（这里有一个问题，它假设自行车记录是连续的并且从 1 开始，这不一定是这种情况，但这是另一个问题）

但是 v-if 没有看到哈希，因此当 seen[x] 的值发生变化时不会发生任何动作。

标签： vue.js

解决方案

在创建的地图的初始化我只是有

this.seen = false;

我把它改成了

Vue.set(this.seen, i, false);

现在它可以工作了。

推荐阅读