Question

我有这个html代码

<tr v-for="(help, index) in helps">
    <td scope="row">{{ help.ID }}</td>
    <td scope="row">{{ help.Date | formatDateWithTime }}</td>
    <td>
        <p @click="fullTextFun(index)" v-show="help.FullText">{{ help.Text.substring(0,16) + '...' }}</p>
        <p @click="fullTextFun(index)" v-show="!help.FullText">{{ help.Text }}</p>
    </td>
</tr>

当某人单击当前p元素时，我希望能够显示全文。这是我的Vue功能

fullTextFun: function(index) {
    this.helps[index].FullText = !this.helps[index].FullText;
},

它不起作用。我也尝试使用此代码

<span @click="fullTextFun(help)" v-show="help.FullText">{{ help.Text.substring(0,16) + '...' }}</span>
fullTextFun: function(item) {
    item.FullText = !item.FullText;
},

但是再没有运气了。似乎v-show函数并不关心help.FullText

的状态

加载数据时，我的FullText数组中没有helps变量。我不知道这是不是问题

这是我的helps变量首次加载时的内容

[{“ ID”：“ 2”，“ Date”：“ 2019-05-15 17:27:29“，” Text“：” randomText“}，{” ID“：” 4“，” Date“：” 2019-05-17 09:53:59“，”文字“：”一些文字“}]

Answer 1

可能是Vue反应性问题。

fullTextFun: function(index) {
    this.helps[index].FullText = !this.helps[index].FullText;
    this.helps = JSON.parse(JSON.stringify(this.helps))
}

Basic Vue仅在更改参考时才更新。当您更新this.helps[index].FullText时，this.helps仍指向旧对象引用，Vue无法识别更改。

另一个解决方案是使用Vue.set

Vue.set(this.helps[index], 'FullText', !this.helps[index].FullText)

您可以在Vue document

阅读更多内容

使用v-for和v-show隐藏/显示p元素内的其他文本

1 个答案: