如何將組件數據作爲json發送到服務器？

Question

這是我的設置：

<template> 
    <div id="" style="min-height: 100px"> 
     <template v-for="(block, index) in blockList"> 
      <component :is="block"></component> 
     </template> 
    </div> 
</template> 

<script> 
    import TextBlock from './blocks/TextBlock.vue' 
    import ImageBlock from './blocks/ImageBlock.vue' 

    export default { 
     data: function data() { 
      return { 
       blockList: ['text-block', 'image-block', 'text-block'] 
      } 
     }, 

     props: { 
      blocks: {type: Array} 
     }, 
     // afterMount() { 
     //  this.blocks.push(['text-block']); 
     // }, 
     components: { 
      TextBlock, 
      ImageBlock 
     } 
    } 
</script> 

<style lang="scss"> 

</style> 

所以只是爲了檢驗一切工作我手動添加一些組件：黑名單：「文本塊」，「圖像塊」，「文本塊」]

和一切呈現在頁面上罰款。但是，我不會手動添加組件，但我會讓用戶添加它們，用戶將能夠添加任意數量的組件。當前有2個組件會使用更多的組件。

當我添加可以說10個不同的組件到頁面和用戶按保存按鈕，我會怎麼去發送這個數據到服務器？我不能只將blockList數組發送到服務器，因爲這只是一個字符串數組。

我想要做的是跟蹤所有已添加的組件，然後用按鈕將所有組件及其屬性的屬性（如果我已將任何文本輸入到文本組件中）發送到服務器的json ，或者如果我已經將圖像上傳到圖像組件中，則需要將所有數據發送到服務器，以便在稍後重新加載頁面以供再次編輯時重新創建它。

那麼我怎麼能做到這一點作爲blockList：['文本塊'，'圖像塊'，'文本塊']不會做？如何保存一組組件及其所有屬性，並按下按鈕將其發送給服務器？

Answer 1

構建您的組件以支持v-model。更改blockList數據結構是這個樣子：

const blockList = [ 
    { 
    component: "text-block", 
    model: null, 
    label: "Name" 
    }, 
    { 
    component: "text-block", 
    model: null, 
    label: "Address" 
    } 
] 

請注意，每個在blockList的項目現在有一個model你可以用它來從組件收集數據。然後，使用v-model將組件綁定到塊模型。

<component v-for="item in blockList" 
      :is="item.component" 
      v-model="item.model" 
      :label="item.label" 
      :key="item"> 
</component> 

下面是一個例子組件實現：

const TextBlock = { 
    props:["value", "label"], 
    template: ` 
    <div> 
     {{label}} 
     <input type="text" @input="$emit('input', $event.target.value)" :value="value"> 
    </div> 
    ` 
} 

現在，在每個blockList元素將包含從該組件收集的數據。如果要保存該數據，請遍歷blockList並提取要提交的數據。

這裏是working example。

在這個例子中，我沒有完成提交數據的工作，你可以自己解決這個問題。我也沒有實現ImageBlock組件;無論如何，我不知道你想如何工作。但是遵循相同的模式，您應該能夠在ImageBlock組件上支持v-model並以相同的方式提交數據。