Question

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

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

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

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

我的类别结构如下：{id: 1, title: "Cat1"}

这是页面代码：

我的主要问题是我正在检查breadcrumbs的长度是否显示出来，但是由于即使按下后我仍会得到空arr，所以面包屑部分只显示了all。

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

顺便说一句，我正在使用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。这会使对象变异。一个重要的禁止事项是将您的状态从计算所得的属性中突变出来。

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

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

此外，您还有一个错字lenght而不是length

无法将对象添加到数组

1 个答案: