gpt4 book ai didi

javascript - Vuex 突变更新状态,计算属性永远不会反射(reflect)标记中的更新

转载 作者:行者123 更新时间:2023-11-28 17:12:16 26 4
gpt4 key购买 nike

这个问题已经有一段时间没有被触及了,但是当我使用计算属性作为文本区域值时,我遇到了一些令人困惑的事情。

我有一个文本区域,您可以在其中提供输入文本,并在输入时更新 vuex 中的输入文本:

<textarea
ref="inputText"
:value="getInputText"
@input="setInputText"
class="textarea"
placeholder="Your message goes in here"
></textarea>

单击按钮翻译文本时,我调用 handleInput 方法。

handleInput() {
this.$store.dispatch("translateEnglishToRussian");
},

在我的商店中,我有 translateEnglishToRussian 操作:

translateEnglishToRussian({ commit }) {
const TRANSLATE_API = "https://XXXXXXXX.us-east-1.amazonaws.com/prod/YYYY/";
const data = JSON.stringify({ english: this.state.inputText });

this.$axios
.$post(TRANSLATE_API, data)
.then(data => {
commit("setOutputText", data.translatedText);
commit("setMP3Track", data.mp3Path);
})
.catch(err => {
console.log(err);
});
}

我看到它使用翻译文本的有效负载调用 setOutputText 突变,在我的 vue 开发工具中,我看到翻译文本的正确状态。但是,我的第二个文本区域纯粹用于显示翻译后的文本永远不会更新!

输出文本区域:

<textarea
disabled
ref="outputText"
:value="getOutputText"
class="textarea"
></textarea>

它的值绑定(bind)到一个名为 getOutputText 的计算属性:

getOutputText() {
return this.$store.state.outputText;
}

我在这里做错了什么!任何建议表示赞赏。我认为这应该没问题,因为我在 vuex 操作中以同步方式使用 commit (在 then() block 内)。

编辑:如果我也尝试使用v-model,我会得到相同的结果。 vuex 状态的初始输出文本在页面加载时呈现。当我翻译时,我可以正确地在 Vue 开发工具中看到更新,但文本区域中的文本永远不会重新渲染。

编辑 #2:这是我的 setOutputText 突变:

  setOutputText(state, payload) {
console.log(`state - set output - ${payload}`);
state.outputText = payload;
},

最佳答案

查看 Multiline text 的 vue 文档后,您应该将 :value="getOutputText" 替换为 v-model="getOutputText"

因为它是计算属性,所以要在 v-model 中使用它,您需要将 getset 添加到您的计算属性

<textarea
disabled
ref="outputText"
v-model="getOutputText"
class="textarea"
></textarea>

编辑:根据@Stephen Tetreault评论,v-model对他不起作用,但是:value 最后确实解决了问题。

computed: {
getOutputText: {
// getter
get: function () {
return this.$store.state.outputText;
},
// setter
set: function (newValue) {
// there is no need to set anything here
}
}
}

关于javascript - Vuex 突变更新状态,计算属性永远不会反射(reflect)标记中的更新,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54136670/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com