javascript - 计算方法在vue js中更改复选框值时不更新
问题描述
我制作了一个代码笔来演示我遇到的一个问题,即复选框不起作用。更改时, 的值clipsData
不会更新。
https://codepen.io/bozlurrahman/pen/BeZVzR?editors=1010
<div id="video-clips-wrap">
<div>{{clipsData}}</div>
<li v-for="(clip, index) in clips" v-bind:key="index">
<div class="vl-subsource-container">
<input type="checkbox" value="issubsource" v-model="clip.subsourcesettings" v-on:change="viewSubSource(index)"><label>Not Update on change: {{clip.issubsource}}</label>
<div v-if="clip.subsourcesettings.length">
<label>Dynamic Contents</label>
</div>
</div>
<div class="meditations-options">
<label>Meditations: </label>
<input type="checkbox" value="motivation" v-model="clip.meditations"><label>1. Motivation</label>
<input type="checkbox" value="gratitude" v-model="clip.meditations"><label>2. Gratitude</label>
</div>
</li>
</div>
var video_clip_data_var = "[{\"meditations\":[\"motivation\",\"gratitude\"]}]";
var VideoClip = new Vue({
el: '#video-clips-wrap',
data: {
clips: [],
loading: false,
},
created: function () {
this.clips = JSON.parse(video_clip_data_var);
for (var i = 0; i < this.clips.length; i++) {
// if( typeof this.clips[i].meditations == "string" )
// this.clips[i].meditations = this.clips[i].meditations.split(',');
this.clips[i].subsourcesettings = "issubsource".split(',');
this.clips[i].subsources = [];
}
},
methods: {
viewSubSource: function (index) {
console.log(`this.clips[`+index+`].subsourcesettings`,this.clips[index].subsourcesettings);
console.log(`this.clips`,this.clips);
// this.clipsData = JSON.stringify(this.clips);
},
},
computed: {
clipsData: function () {
return JSON.stringify(this.clips);
},
}
});
有没有人可以帮我解决这个问题?单击复选框时,隐藏的内容应直接显示。谢谢。
解决方案
替换那个
this.clips[i].subsourcesettings = "issubsource".split(',');
this.clips[i].subsources = [];
到
Vue.set(this.clips[i], 'subsourcesettings', "issubsource".split(','))
Vue.set(this.clips[i], 'subsources', [])
在这里您可以找到有关您的问题的更多详细信息。
推荐阅读
- vert.x - 如何使用 Vert.x JavaScript 动态加载 JAR 文件?
- powerbi - Power Bi DAX:仅工作日的每周专栏
- react-native - 如何从 React Native 中的目录导入矢量图标?
- kendo-ui - Kendo UI 多选标记模式 - 基于键入的值进行过滤,而不将键入的文本传递给服务器
- javascript - 如何使用本机反应在firebase中显示日期
- c++ - 如何编写 CMakeLists.txt 来构建一些源代码及其示例代码?
- docker - 如何重用来自 `RUN --mount=type=cache` docker build 的缓存?
- sql - 无法实现外键约束 »FK_0e4022833a9efc062c01637e552« - 复合主键有问题?
- javascript - document.write 写入“对象”而不是文本
- mysql - MySQL 数据库或简单的 JSON 文件,哪一个会提高性能和存储效率?