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模型中创建的数组

回答

相关问题