Vue Js v-模型不適用於在Laravel模型中創建的數組

我目前正在使用Laravel和Vue JS構建一個CMS，它基於在Laravel模型中創建的數據數組動態構建表單。下面是一個例子：Vue Js v-模型不適用於在Laravel模型中創建的數組

class TheBuilding extends Model 
{ 

    protected $fillable = [...]; 

    public function formFields(){ 
     $fields = [ 
      [ 
       'label' => 'Title', 
       'name' => 'title', 
       'component' => 'input_text' 
      ], 
      [ 
       'label' => 'Content', 
       'name' => 'content', 
       'component' => 'input_textarea' 
      ], 
      [ 
       'label' => 'Main Image', 
       'name' => 'main_image', 
       'component' => 'input_single_upload' 
      ], 
      [ 
       'label' => 'Gallery', 
       'name' => 'gallery', 
       'component' => 'input_multiple_upload', 
       'meta' => [ 
        [ 
         'type' => 'text', 
         'name' => 'caption', 
         'label' => 'Caption' 
        ] 
       ] 
      ], 
     ]; 
     return $fields; 
    } 
}

基本上這個數組被傳遞到Vue的JS和解析，以動態地相應地顯示的Vue JS形式的組件。這一直工作得很好，但我遇到了一個有趣的問題，Gallery多重上傳組件需要爲圖像分配標題。

爲了快速轉發，我在上傳文件的數組中進行迭代並顯示在頁面上，然後爲下面的標題輸入文本字段。

這裏是我的組件（編輯以顯示相關位）：

<template> 
    <div class="row"> 
     <div v-for="(file, i) in files"> 
      <img :src="file.file" > 
      <div v-for="meta in file.meta"> 
       <input v-if="meta.type == 'text'" type="text" v-model="meta.value"> 
      </div> 
     </div> 
    </div> 
</template> 
<script> 
    export default{ 
     computed:{ 
      files(){ 
       let uploads = []; 
       /*this.uploaded is just an array of filenames*/ 
       this.uploaded.forEach((file, i) => { 
        let createdMeta = [ 
         { 
          name:"caption", 
          type:"text", 
          value:'' 
         } 
        ]; 
        uploads.push({file,meta:createdMeta}); 
       }); 
       return uploads; 
      } 
     }, 
     props:{ ... }, 
     mounted(){ 
      //CODE THAT HANDLES DROPZONE UPLOAD 
     }, 
     name: 'InputMultipleUpload', 
     data(){ 
      return { 
       showUploadProgress:true, 
      } 
     } 
    } 
</script>

我專注於該位：

let createdMeta = [{ 
    name:"caption", 
    type:"text", 
    value:'' 
}];

您會在這裏，我已經創建了一個通知靜態數組。如果我這樣做，當我輸入標題文本框時，一切正常，標題值按預期動態地由v-model更新。基本上，我得到了理想的結果，一切都很好。

但是，如果我試圖從創建的模型，即動態地設置此此：

let createdMeta = formFields;

其中formFields是參考模型排列，當我再在文本框中鍵入更新所有其他文本框和創建的文件數組中的值。 V-Model似乎不再涉及特定的文本框。

所以我想我要問的問題是：

一）爲什麼表現這種方式，當我引用的數組

二）爲什麼它正常工作，如果我只是手動創建傳入那個數組？

c）我怎樣才能讓A表現得像B？

謝謝大家，很高興澄清任何事情。我假設我在反應性難題中缺少一塊。

乾杯，盧

來源

2017-08-10 Lewis Cains

您應該使用data不computed。

嘗試這樣：

<script> 
    export default { 
    props: {...}, 
    mounted() { 
     //CODE THAT HANDLES DROPZONE UPLOAD 
     // 2. handlers should call `onUpload` 
    }, 
    name: 'InputMultipleUpload', 
    data() { 
     return { 
     files: [], // 1. declaring `files` here makes it reactive 
     showUploadProgress: true, 
     } 
    }, 
    methods: { 
     onUpload (file) { 
     const meta = createdMeta = [{ 
      name: "caption", 
      type: "text", 
      value: '' 
     }] 
     this.files.push({file, meta}); // 3. push the new data onto the stack and the component will update 
     } 
    } 
    } 
</script>

來源

2017-08-10 12:05:27 davestewart

有了這個：

let createdMeta = formFields; 
uploads.push({file,meta:createdMeta});

在一個循環中，你實際上只是通過參照同formFields數組對象，然後結合你所有的投入到它。

如果你爲每個輸入傳遞一個新的數組副本，這很可能會像它應該那樣工作。你可以這樣做很容易這樣說：

let createdMeta = formFields.slice();

來源

2017-08-10 10:21:55

謝謝您的幫助。不幸的是，這並沒有奏效。奇怪的困境，但無論如何感謝 –

@LewisCains，好吧，那麼......你可以在這一步檢查'formFields'的值嗎？在你的代碼中，它沒有顯示這個變量獲取值的地方。它實際上是一個與你分配staticaly相同的數組嗎？ –

let createdMeta = JSON.parse(JSON.stringify(formFields))

感謝里克在農閒和Dave管家太多，我必須重構做的，但該線程在這裏的目的是解決

來源

2017-08-10 12:25:14

Vue Js v-模型不適用於在Laravel模型中創建的數組

回答

相關問題