Question

对不起标题，我不知道如何更好地解释它。

我有3个单选按钮。输出应该是选择任何单选按钮的值。除此之外，第3个单选按钮有一个textarea，如果选中该单选按钮，结果输出应该是textarea中的输出。我还将textarea的@click链接到自动检查单选按钮，因此如果用户点击了textarea，则会自动检查该单选按钮。

一切正常，如果您看到JSFiddle代码并单击第3个单选按钮并在textarea中键入文本，输出应该可以正常工作。但是如果刷新页面，而不是单击单选按钮，如果直接单击textarea（间接检查单选按钮），则在textarea中写入将不会更新输出。这意味着计算功能不起作用。

但是，如果你点击另一个单选按钮，然后点击第3个单选按钮，事情就会开始正常工作。

这里是代码（JSFiddle：https://jsfiddle.net/eywraw8t/43651/）

<div id="app">
    Selected option 1: {{ selectedText }}
  <BR>

  <input type="radio" name="item1" value="" v-model="selected[0]" /> Empty<BR>
  <input type="radio" name="item1" value="Hi" v-model="selected[0]" /> Hi<BR>
  <input type="radio" name="item1" value="**custom**" v-model="selected[0]" /> <textarea name="textarea0" id="textarea0" cols="30" rows="10" v-model="custom[0]" @click="customClicked"></textarea><BR>
</div>

<script>
new Vue({
  el: "#app",
  data: {
        selected: ['', ''],
    custom: ['', ''],
  },

  computed: {
    selectedText: function() {
        if (this.selected[0] != '**custom**') return this.selected[0];

      return this.custom[0];
    }
  },

  methods: {
    customClicked: function(e) {
        //$(e.target).prev().prop('checked', true);
      this.selected[0] = '**custom**';
      this.$forceUpdate();
    }
  }
})
</script>

Answer 1

更新

当提问者选择另一个答案时，我不认为这是关键点。

原因是$forceUpdate()仅强制视图重新渲染，而不是计算属性。请参阅问题forceUpdate does not update computed fields

我创建了一个简单的jsfiddle来描述它。

原始答案

您遇到的问题是vuejs在某些情况下无法检测到阵列更改。您可以在文档vuejs list rendering

中查看更多详细信息

所以解决方案被替换为这些代码

this.selected[0] = '**custom**';
this.$forceUpdate();

与

this.$set(this.selected, 0, '**custom**')

Answer 2

您不需要jQuery - 只需将值绑定到一个数组并在@focus上使用textarea事件：

new Vue({
  el: "#app",
  data: {
    values: ['', 'Hi', ''],
    selected: '',
  },
  computed: {
    selectedText: function() {
      return this.values[this.selected];
    }
  }
})

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<div id="app">

  Selected option 1: {{ selectedText }}
  <BR/>

  <input type="radio" name="item1" value="0" v-model="selected" /> Empty
  <BR/>
  <input type="radio" name="item1" value="1" v-model="selected" /> Hi
  <BR />
  <input type="radio" name="item1" value="2" v-model="selected" />

  <textarea name="textarea0" id="textarea0" cols="30" rows="10" v-model="values[2]" @focus="selected = '2'"></textarea>

</div>

Also the JSFiddle

Answer 3

在写答案时，我有了一个想法，似乎有效。但是我仍然想知道是否有一个＆＃34;对＆＃34;做我不想做的事情。

解决方法是＆＃34;点击＆＃34;单选按钮而不是＆＃34;检查＆＃34;它：

$(e.target).prev().click();

如果通过代码检查无线电，则计算不更新

3 个答案:

更新

原始答案