将 v-data-table 绑定到模板中的 props 属性

Question

我有一个 vue 组件，它调用一个返回多部分 json 对象的加载方法。这个 vue 的模板由我分配的几个子 vue 组件组成：data="some_object"。

这适用于所有模板，除了带有 v-data-table 的模板，因为 v-for 过程（或 v-data-table 的构建/渲染）似乎在“数据”之前启动属性已加载。

使用 npm 开发服务器，如果我对触发数据表刷新的项目进行细微更改，然后按预期加载数据。

尝试了各种事件来尝试将本地属性分配给通过“props[]”传入的属性。有趣的是，如果我做一个虚拟的 v-for 来迭代或简单地访问 data[...] 属性，随后的 v-data-table 就会加载。但是我需要根据同一行中的列绑定其他规则，这不起作用。

父/主 vue 组件：

...
  <v-flex xs6 class="my-2">
    <ShipViaForm :data="freight"></ShipViaForm>
  </v-flex>
  <OrderHeaderForm :data="orderheader"></OrderHeaderForm>
  <v-flex xs12>
    <DetailsForm :data="orderdet" :onSubmit="submit"></DetailsForm>
  </v-flex>
...

所以在上面的 :data 属性是从下面的结果中为每个子组件分配的。

...
  methods: {
    load(id) {
      API.getPickingDetails(id).then((result) => {
        this.picking = result.picking;
        this.freight = this.picking.freight;
        this.orderheader = this.picking.orderheader;
        this.orderdet = this.picking.orderdet;
      });
    },
...

DetailsForm.vue

    <template lang="html">
    <v-card>
        <v-card-title>
          <!-- the next div is a dummy one to force the 'data' property to load before v-data-table -->
          <div v-show="false">
            <div class="hide" v-for='header in headers' v-bind:key='header.product_code'>
              {{ data[0][header.value] }}
            </div>
          </div>
        <v-data-table
          :headers='headers'
          :items='data'
          disable-initial-sort
          hide-actions
        >
          <template slot='items' slot-scope='props'>
            <td v-for='header in headers' v-bind:key='header.product_code'>
              <v-text-field v-if="header.input"
                label=""
                v-bind:type="header.type"
                v-bind:max="props.item[header.max]"
                v-model="props.item[header.value]">
              </v-text-field>
              <span v-else>{{ props.item[header.value] }}</span>
              </td>
            </template>
        </v-data-table>
        </v-card-title>
    </v-card>
</template>

<script>
import API from '@/lib/API';

export default {
  props: ['data'],
  data() {
    return {
      valid: false,
      order_id: '',
      headers: [
        { text: 'Order Qty', value: 'ord_qty', input: false },
        { text: 'B/O Qty', value: 'bo_qty', input: false },
        { text: 'EDP Code', value: 'product_code', input: false },
        { text: 'Description', value: 'product_desc', input: false },
        { text: 'Location', value: 'location', input: false },
        { text: 'Pick Qty', value: 'pick_qty', input: true, type: 'number', max: ['ord_qty'] },
        { text: 'UM', value: 'unit_measure', input: false },
        { text: 'Net Price', value: 'net_price', input: false },
      ],
    };
  },
  mounted() {
    const { id } = this.$route.params;
    this.order_id = id;
  },
  methods: {
    submit() {
      if (this.valid) {
        API.updateOrder(this.order_id, this.data).then((result) => {
          console.log(result);
          this.$router.push({
            name: 'Orders',
          });
        });
      }
    },
    clear() {
      this.$refs.form.reset();
    },
  },
};
</script>

Answer 1

希望这能帮助那些只见树木不见森林的人......

当我在父表单中声明 data() { ... } 属性时，我将 orderdet 初始化为 {} 而不是 []。