无法将对象添加到数组

Question

我的面包屑有一个空数组，我想用我在类别树中采取的每一步来填充它。

但正如我在标题中所说，它不会添加或更准确地说，它会添加但不会显示！

它不会显示在我的模板上！它不会显示在控制台上！仅当 i console.log("bread", Array.from(this.breadcrumbs)) 时才会显示在控制台中。

如何用我通过事件发送的类别 obj 填充我的 this.breadcrumbs！

我的分类结构是这样的：{id: 1, title: "Cat1"}

这是页面代码：

我的主要问题是我正在检查 breadcrumbs 是否有长度显示它，但由于即使在推送后我得到空 arr，我的面包屑部分只显示 all。

更新： 我删除了模板、面包屑部分中的 if 语句，当我单击猫时，它的标题将显示在面包屑上，但长度和数组仍然为空，即使尝试在模板上显示！ （{{breadcrumb}} 和 {{breadcrumb.length}} are []and0`）。

顺便说一句，我正在使用 Nuxtjs 2.13

<template>
<div class="ma-4">
  <!-- Breadcrumb -->
  <div class="d-flex">
    <template v-if="breadcrumbs.length">
      <span role="button" @click.prevent="getAll()">{{lang.all}} > </span>
      <span role="button" v-for="(br, index) in newBreadCrumb" :key="br.id" @click.prevent="goBread(br, index)">{{br.title}} > </span>
      <span>{{breadcrumbs[breadcrumbs.length - 1]}}</span>
    </template>
    <template v-else>
      <span>{{lang.all}}</span>
    </template>
  </div>
  <!--btn add-->
  <addcatbtn v-if="showBtn" @clicked="addNewCat()" />
  
  <!--cards-->
  <categorylistcard v-for="(category, index) in cmsCat" 
  :key="category.id" 
  :cat="category" 
  :index="index" 
  @addnewsub="addNewCat()"
  />
    
<!-- dialog -->
  <v-dialog v-model="dialog" persistent max-width="600px">
    <v-card>
      <v-card-title>
        <span class="headline" v-if="editId">{{lang.edit}} </span>
        <span class="headline" v-else>{{lang.addcat}} </span>
      </v-card-title>
      <v-card-text>
        <v-container grid-list-md>
            <v-layout wrap>
            
            <v-flex xs12>
                <v-text-field :label="lang.title" outlined v-model="title"></v-text-field>
            </v-flex>
            
            </v-layout>
        </v-container>
      </v-card-text>
      <v-card-actions>
        <v-spacer></v-spacer>
        <v-btn class="text_main_color theme__cta__color px-5" @click="closeDialog()">{{lang.close}}</v-btn>
        <v-btn class="text_main_color theme__btn__s px-5" @click="insertData()">{{lang.save}}</v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>
</div>
</template>

<style>

</style>
<script>
import addcatbtn from '~/components/global/cms/addcatbtn'
const categorylistcard = ()=>import('~/components/' + process.env.SITE_DIRECTION + '/cms/categorylistcard')

export default {
    layout:'cms',
    components:{
      'categorylistcard': categorylistcard,
      'addcatbtn': addcatbtn
    },
    data(){
      return{
        dialog: false,
        editId: 0,
        newId: 0,
        title: null,
        catList: [],
        editIndex: 0,
        parentId: 0,
        editSubCat: false,
        showBtn: true,
        onSubCat: false,
        breadcrumbs: []
      }
    },
    methods:{
      addNewCat(){
        this.dialog = true
        this.title = null
      },
      closeDialog(){
        this.dialog = false
        this.title = null
        this.editId = 0
        this.editIndex = 0
      },
      getAll(){
        this.$fetch()
        this.showBtn = true
        this.onSubCat = false
        this.breadcrumbs = []
      },
      goBread(cat, index){
        this.breadcrumbs.lenght = index
        $nuxt.$emit('gobread',cat)
      },
      async insertData(){
        if(this.notEmpty(this.title)){
          if(this.editId){
            let response = await this.axiosGet(`category/update/${this.editId}/${this.title}`)
            if(this.resOk(response.status)){
              const data = {index: this.editIndex , title: this.title}
              if(this.editSubCat){
                this.updateCmsSubCat(data)
              }else{
                this.updateCmsCat(data)
              }
              $nuxt.$emit('editedcat', {id: this.editId, title: this.title})
              this.closeDialog()
            }
          }else{
            if(this.onSubCat){
              let response = await this.axiosGet(`category/insertsub/${this.newId}/${this.title}`)
              if(this.resOk(response.status)){
                // TODO: must get the id from response!!
                console.log('insertsub')
                const data = {id: this.newId*2 , title: this.title}
                this.addCmsSubCat(data)
                this.closeDialog()
              }
            }else{
              let response = await this.axiosGet(`category/insert/${this.title}`)
              if(this.resOk(response.status)){
                // TODO: must get the id from response!!
                const data = {id: 34 , title: this.title}
                this.addCmsCat(data)
                this.closeDialog()
              }
            }
          }
        }
      }
    },
    async fetch(){
      let response = await this.axiosGet(`categories/admin/0/1`)
      if(this.notEmpty(response.data)){
        this.setCmsCat(response.data.items)
      }
    },
    computed:{
      newBreadCrumb(){
        let x = this.breadcrumbs
        return x.splice(this.breadcrumbs.lenght-1,1)
      }
    },
    created(){
      this.$nuxt.$on('deletecat', (index)=>{
        this.removeCmsCat(index)
      })
      this.$nuxt.$on('editcat', (category, index)=>{
        this.title = category.title
        this.editId = category.id
        this.editIndex = index
        this.dialog = true
      })
      this.$nuxt.$on('setparid', (id)=>{
        this.parentId = id
      })
      this.$nuxt.$on('editsub', ()=>{
        this.editSubCat = true
      })
      this.$nuxt.$on('showsub', (cat)=>{
        this.newId = cat.id
        this.showBtn = !this.showBtn
        this.onSubCat = !this.onSubCat
      })
      this.$nuxt.$on('addbreadcrumb', (category)=>{
        
          this.breadcrumbs.push(category) // category:{id: 1, title: "Cat1"}
          console.log('cat: ')
          console.log(category) // get the obj
          console.log('bread: ')
          console.log(this.breadcrumbs) // get empty array
      })
    }
    
}
</script>

Answer 1

在您的计算中，您正在调用splice。这会改变对象。 vue 中的一个大禁忌是从计算属性中改变你的状态。

尝试创建一个新对象并返回它，首先调用slice：

 const copy = x.slice()
 copy.splice(this.breadcrumbs.length-1,1)
 return copy

另外，你有一个拼写错误 lenght 而不是 length