Vue.js 单击后附加文本。如何？

【问题标题】：Vue.js attach text after clicking. how?Vue.js 单击后附加文本。如何？
【发布时间】：2017-10-22 05:43:45
【问题描述】：

我有这个 Vue Material (Vue.js) 标签，带有函数

<md-button id="" v-on:click.native="requestSelected(request)">


methods: {

        requestSelected: function(request) {
            request.accepted = true;
            console.log(request);

            var card = document.getElementById('text');
            var accept = document.createTextNode("Job selected");

            card.appendChild(accept);

        }

单击后我正在尝试在 DOM 上添加一些文本，有人可以向我推荐一些 Vue js 文档来检查信息

【问题讨论】：

标签： vue.js vuejs2 vue-component vue-router vue-material

【解决方案1】：

在你的 Vue 组件中，为你的显示文本创建一个数据属性：

data() {
  return {
    displayText: '',
  }
}

然后，只需在模板中添加对 displayText 的引用，如下所示：

{{ displayText }}

Vue 最初不会显示任何内容，因为displayText 为空，并且当displayText 更改时会自动更新 DOM。

您可以像这样更改requestSelected 方法中的文本：

requestSelected: function(request) {
  request.accepted = true;
  this.displayText = "Job selected";
}

Here's an example in codepen.

【讨论】：

非常感谢，伙计！ :) 完美运行