vue.js 推送数组组件

Posted 2023-02-22

【中文标题】vue.js 推送数组组件

【英文标题】：vue.js push array component

【发布时间】：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之外

举个例子

【参考方案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>