存在しないオブジェクトに対するVueJSデータの初期化

Question

私は、Ajaxを使用していくつかのオブジェクトのデータプロパティを設定しています。そのため、バインドしたいプロパティはバインド時に存在しません。

例：Vueのドキュメントhttps://012.vuejs.org/guide/best-practices.htmlで

<template> 
    <my-list v-bind:dataid="myobject ? myobject.data_id : 0"></my-list> 
</template> 

<script> 
export default { 

    data() { 
    return { 
     myobject: {} 
    } 
    } 
</script> 

、代わりに空のオブジェクトを使用してのデータを初期化するために言及しています。

しかし、数十のパラメータとサブパラメータを持つ複数のAjax作成オブジェクトを使用しています。 MyObjectには、オブジェクトの配列を含むオブジェクト、または例えばオブジェクトのサブアレイを含むオブジェクトの配列であってもよい

myobject: { subp1: [], subp2: [] ...} 

：このようなすべてのオブジェクト上のすべてのサブパラメータを初期化します。

はかなりの労力を要します。 'まだ存在しない'オブジェクトにバインドするときは、より良い選択肢がありますか？

Answer 1

まず、空の配列は、まだ "truthy" であるので、ここではあなたのチェック

v-bind:dataid="myobject ? myobject.data_id : 0"

は常にtrueを返します。代わりにmyobject.lengthを確認する必要があります。あなたのコードは今動作するはずです。

また、実際には、配列にダミーオブジェクトを定義する必要はありません。配列を変更するたびにVueが検出されます。

https://vuejs.org/v2/guide/list.html#Array-Change-Detection