Как синхронизировать вычисленное свойство от дочернего компонента до родительского компонента в Vue? ⇐ Javascript

[Anonymous]

Я изучаю VUE и пытаюсь распространять значение входного компонента родителю. В реальном коде это текстовое поле с предложением автозаполнения. Но для этого вопроса у меня есть гораздо более простой пример. < /P>
Вот простой компонент, который подсчитывает, сколько раз вы его щелкнули: < /p>

Код: Выделить всё

const UpdateParentTest = {
data()  {
return {
lastClickCount: 0
}
},
methods: {
//When one of the suggestion is clicked
clicked() {
this.lastClickCount++;
console.log("Clicked, new count: ", this.lastClickCount);
this.updateClicks();
},
updateClicks() {
console.log("Emit update:lastClickCount with: ", this.lastClickCount);
this.$emit('update:lastClickCount', this.lastClickCount);
},
},
computed: {
computedClickCount() {
return this.lastClickCount;
}
},
watch: {
computedClickCount(newVal) {
console.log("Update click count: ", newVal);
this.lastClickCount = newVal;
}
},
template: "Clicks in child: {{computedClickCount}}"
};

export default UpdateParentTest;

Обратите внимание, что, несмотря на то, что я мог бы использовать последний кликкоунт , в реальной жизни обычно будет какая-то пост-обработка в значении, и поэтому я всегда хочу связать в вычислительную обертку.import UpdateParentTest from "./UpdateParentTest.js";
const app = {
data() {
return {
boundClickCount: -1
};
},
template: "#vue-select-station-template",
components: {"updateparenttest": UpdateParentTest},
computed: {
calculatedClickCount() {
if(this.boundClickCount < 0) {
return "no click updates";
}
else {
return this.boundClickCount.toString();
}
}
}
};

const vueApp = vue_core.createApp(app);
vueApp.mount('#vue-app');
< /code>
Использование этого html: < /p>



Click count parent: {{calculatedClickCount}}





< /code>
Еще раз используется вычисленная обертка, чтобы определить, является ли значение действительным. Тем не менее, тестирование этого кода я не получаю обновлений в родителе. Как заставить его работать, чтобы я мог рекурсивно распространять изменения от вложенных компонентов в основное приложение?

Подробнее здесь: https://stackoverflow.com/questions/794 ... ent-in-vue