Question

这个问题已经有一段时间没有被解决了，但是当使用计算属性作为textarea值时，我遇到了困惑。

我有一个textarea，您可以在其中输入文本，并在输入时更新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>

其值绑定到名为getOutputText的计算属性：

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

我在这里做错了什么！任何建议表示赞赏。我认为应该没问题，因为我正在vuex动作中以同步方式（在then（）块内）使用commit。

编辑：如果我也尝试使用v-model，则结果相同。来自vuex状态的初始输出文本在页面加载时在那里呈现。翻译时，我可以在Vue Dev Tools中正确看到更新，但是文本区域中的文本永远不会重新呈现。

编辑＃2：这是我的setOutputText突变：

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

Answer 1

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

由于它是计算属性，因此要在v-model中使用它，您需要在计算属性中添加get和set

<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
    }
  }
}

Vuex突变更新状态，计算属性永远不会反映标记中的更新

1 个答案: