javascript - 为什么 Vue 组件不会在选择更改时更新
问题描述
I have a form that changes some text within a vue component when a select box is changed. 我在 jsfiddle 中创建了一个高度最小化的版本来显示我遇到的问题:
https://jsfiddle.net/ywaug7ft/
HTML:
<div id="app">
<h5>Select a gender</h5>
<select v-model="gender">
<option disabled="disabled" value>Select...</option>
<option value="1">Male</option>
<option value="2">Female</option>
<option value="3">Couple</option>
</select>
<div></div>
<detail-component v-for="(detail, index) in details" :data="detail" :index="index"></detail-component>
{{details}}
</div>
<template id="details">
<div>
<h4><span v-if="item.gender == 3 && index == 0">Her</span><span
v-else-if="item.gender == 3 && index == 1">His</span><span v-else>Your</span> Health Details</h4>
<div>Index: {{index}}</div>
<div>Gender: {{item.gender}}</div>
</div>
</template>
视图:
Vue.component('detail-component', {
template: '#details',
props: ['data', 'index'],
data() {
return {
item: {
gender: this.data.gender
}
}
}
});
var app = new Vue({
el: '#app',
data: {
gender: '',
details: [],
options: {
gender: {
"1": "Single Female",
"2": "Single Male",
"3": "Couple"
}
}
},
watch: {
gender: function(val) {
this.details = [];
if (val == 1) {
this.details.push({gender: 1});
} else if (val == 2) {
this.details.push({gender: 2});
} else if (val == 3) {
this.details.push({gender: 3}, {gender: 3});
}
}
}
});
基本上,当我从下拉列表中选择female
或时male
,我的 vue 组件应该将 h 标签更新为Your Details
. 当我选择 时couple
,我的视图组件应该更新为说Her Details
and His Details
。但是,它不会将第一个索引更新为,Her
而是保持Your
.
看看 jsfiddle,你就会明白我的意思。
只是想了解我做错了什么。我认为使用 watcher 会在组件中产生反应。
解决方案
推荐阅读
- android - KOTLIN:android.view.ViewRootImpl$CalledFromWrongThreadException:只有创建视图层次结构的原始线程才能触摸其视图
- python - Python click 和 --help 选项回调并不急于
- cakephp - 如何从 CakePHP 3 的结果集中删除一个项目?
- python - 使用 with open 对 json 文件进行编码
- javascript - 更改表值时Vuex Store不更新
- json - iOS 12 相当于 JSONSerialization.WritingOptions.withoutEscapingSlashes (Swift)?
- c - if 语句的时间复杂度是多少?
- javascript - 为什么在这个例子中使用变量而没有在 javascript 中声明?
- python - 计算 pandas 列中逗号分隔国家的总数
- c# - C# dot net 中的 webrtc 信令服务器