Vuejs:监听道具变化并使用它
Vuejs: listen to props changes and use it
我正在使用 Vue JS 开发一个项目,我需要观察道具的变化并在 <span>
中调用它。
我用过watch()
,显示props值已赋值
但是当我在 <span>
中调用它时,值没有显示。
props: ['verifyText', 'verifyValue', 'profileId', 'logged', 'verifyType', 'status'],
watch: {
verifyText: function () { // watch it
this.verify_text = this.verifyText;
},
verifyValue: function () {
this.verify_value = this.verifyValue;
},
verifyType: function () {
this.verify_type = this.verifyType;
}
},
data() {
return {
verify_type: this.verifyType,
verify_text: this.verifyText,
verify_value: this.verifyValue,
}
},
//using inside span
<span>{{verify_text}}</span>
接收并插入从 'watch'
更改的新数据
试试这个。
props: ['verifyText', 'verifyValue', 'profileId', 'logged', 'verifyType', 'status'],
watch: {
verifyText: function (new_value) {
this.verify_text = new_value;
}
},
data() {
return {
verify_text: this.verifyText,
}
},
//using inside span
<span>{{verify_text}}</span>
我通过查看父组件中的 verify_text 解决了这个问题。
'verify_text': function (value) {
this.verify_text = value;
},
verify_type 和 verify_value 相同
谢谢大家的回复。
我正在使用 Vue JS 开发一个项目,我需要观察道具的变化并在 <span>
中调用它。
我用过watch()
,显示props值已赋值
但是当我在 <span>
中调用它时,值没有显示。
props: ['verifyText', 'verifyValue', 'profileId', 'logged', 'verifyType', 'status'],
watch: {
verifyText: function () { // watch it
this.verify_text = this.verifyText;
},
verifyValue: function () {
this.verify_value = this.verifyValue;
},
verifyType: function () {
this.verify_type = this.verifyType;
}
},
data() {
return {
verify_type: this.verifyType,
verify_text: this.verifyText,
verify_value: this.verifyValue,
}
},
//using inside span
<span>{{verify_text}}</span>
接收并插入从 'watch'
更改的新数据试试这个。
props: ['verifyText', 'verifyValue', 'profileId', 'logged', 'verifyType', 'status'],
watch: {
verifyText: function (new_value) {
this.verify_text = new_value;
}
},
data() {
return {
verify_text: this.verifyText,
}
},
//using inside span
<span>{{verify_text}}</span>
我通过查看父组件中的 verify_text 解决了这个问题。
'verify_text': function (value) {
this.verify_text = value;
},
verify_type 和 verify_value 相同 谢谢大家的回复。