vue.js 推送数组组件答案

【问题标题】：vue.js push array componentvue.js 推送数组组件
【发布时间】：2018-04-17 18:06:58
【问题描述】：

1.vue.js 问题组件我想在新数组中插入一条新消息，方法是点击事件，但是不适合我，因为功能不完整问题出在哪里。请帮帮我。

<div class="col-lg-12">
  <h1>{{message.title}}</h1>
  <h4>{{message.subtitle}}</h4>
  </p> {{message.body}}</p>
  <button v-on:click="newMessage">Reverse Message</button>
</div>

import {
  VueTabs,
  VTab
}
from "vue-nav-tabs";

import "vue-nav-tabs/themes/vue-tabs.css";

export default {
  components: {
    VueTabs,
    VTab
  },
  data() {
    return {
      title: "elenco",
      messages: [{
            id: 1,
            title: "titolo",
            subtitle: "sottotitolo",
            body: "argomento",
            author: "Amedeo",
            date: "17/07/2017",
            files: [{
              id: 1,
              title: "Allegatoriunione",
              openfile: "Allegato.pdf"
            }, ],
            methods: {
              newMessage: function() {
                this.message.title = this.message.title
                  .push("")
                  .split("")
                  .reverse()
                  .join("");
              }

【问题讨论】：

您收到什么错误？
按钮不起作用..
方法必须在data之外
举个例子

标签： javascript vue.js

【解决方案1】：

您的代码包含许多可能会静默失败的语法错误。试试这个新的更新代码：

<script>
import { VueTabs, VTab } from 'vue-nav-tabs'
import 'vue-nav-tabs/themes/vue-tabs.css'

export default {
  components: { VueTabs, VTab },
  data() {
    return {
      title: 'elenco',
      messages: [
        {
          id: 1,
          title: 'titolo',
          subtitle: 'sottotitolo',
          body: 'argomento',
          author: 'Amedeo',
          date: '17/07/2017',
          files: [
            {
              id: 1,
              title: 'Allegatoriunione',
              openfile: 'Allegato.pdf'
            }
          ]
        }
      ]
    }
  },
  methods: {
    newMessage() {
      this.message.title = this.message.title
        .push('')
        .split('')
        .reverse()
        .join('')
    }
  }
}
</script>

【讨论】：