Question

我有这样的代码。我想将 deals 数组拆分为3个单独的数组： dealsCol1 ， dealsCol2 ， dealsCol2 ，我想在创建对象之后完成它。我是JavaScript的初学者。我以前用C ++编程，我想我需要的是类似构造函数的东西。我发现 created（）函数可以用作构造函数（在对象创建时调用）。我将用于拆分数组的代码部分放在该函数中，但出现错误：

vue.esm.js：591 [Vue警告]：创建的挂钩中出现错误：“ ReferenceError：未定义交易”

我不知道为什么不在那里定义它，因为我想应该在这里定义它。你能给我一些提示，我该如何解决这个问题？

<script>
export default {
  props: {
    deals: Array
  },
  data() {
    return {
      dealsCol1: [],
      dealsCol2: [],
      dealsCol3: []
    };
  },
  created() { // why it doesn't work??
      this.dealsCol1 = this.deals.slice(0, this.deals.length/3),
      this.dealsCol2 = this.deals.slice(this.deals.length/3, 2*this.deals.length/3),
      this.dealsCol3 = this.deals.slice(2*this.deals.length/3, this.deals.length-1) 
  }
};
</script>

编辑：

如果我从答案之一中将其与compute（）一起使用，则一切正常。但是我想知道为什么 deals 在构造（）之外的所有其他方法中都可见。在模板部分中也可见。这是为什么？父组件代码如下所示：

<template>
  <div>
    <editDealsModal ref="editDealsModal" :deals="deals" @editDeals="editDeals" />
    <table class="table table-sm color mb-2">
      <caption class="caption table-caption">Users</caption>
      <thead>
        <th class="text-left text-nowrap">Deals</th>
        <th></th>
        <th></th>
        <th></th>
        <th></th>
      </thead>
      <tbody>
        <tr v-for="user in users" :key=user.Id v-bind:class="[{ disabled: user.IsEnabled == false }]">
          <td class="text-left align-middle">{{user.Username}}</td>
          <td class="text-left align-middle">
            <div v-for="role in user.Roles" :key=role>{{role}}</div>
          </td>
          <td class="text-left align-middle">
            <div v-for="deal in user.Deals" :key=deal>{{deal}}</div>
          </td>
          <td class="align-middle">
            <b-btn variant="link" @click="showEditDealsModal(user)" v-bind:disabled="!user.IsEnabled">Edit deals</b-btn>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import service from '../../services/HttpRequestService'
import EditDealsModal from './EditDealsModal'

export default {
  props: {
    users: Array,
    deals: Array
  },
  methods: {
    showEditDealsModal(user) {
      this.$refs.editDealsModal.showModal(user, user.Deals || [])
    },
    async editDeals(user, data) {
      try {
        await service.editDeals(user.Id, data);
        this.$emit("userEdited", { type: "success", msg: "Updated deals for " + user.Username })
      } catch (err) {
        this.$emit("userEdited", { type: "danger", msg: "Failed to edit deals for " + user.Username })
      }
    },
  },
  components: {
    EditDealsModal
  }
}
</script>
    enter code here

Answer 1

尝试为Warning: Error in [: incorrect number of dimensions [No stack trace available]数组定义默认值，如下所示

myData

通过使用道具将数据从父母传递到孩子的方式，我认为这不是最好的方法。

Answer 2

myDataCol1,2,3应该是计算属性：

props: {
  myData: {
    default: [],
    type: Array,
  },
},
computed: {
  myDataCol1(){
    return this.myData.slice(0, this.myData.length/3)
  }
  .
  .
  .
}

为什么在created（）方法中未定义变量

2 个答案: