在VueJs中添加和删除功能

时间:2018-01-29 15:20:56

标签: vue.js vuejs2 vue-component

我正在寻找列表中单个元素的一个选项卡到另一个选项卡的添加和删除功能。 我用对话框试过这个,但它给了我不同的结果

  <td class="text-xs-left">
        <v-edit-dialog
           @open="temp = props.item.values"                                           
           large
           lazy>
        <div v-for="value in props.item.values">{{value}}</div>
         <div slot="input" class="mt-3 title">Update Iron</div>
        <v-text-field
         slot="input"
          label=""
        v-model="temp"
        single-line
        counter
        autofocus
        ></v-text-field>
        </v-edit-dialog>

        </td>

现在在数据表col中它给出了这样的值: -

  

590380500

但我想这样: -

590
380个
500个
当我打开对话框时,它给了我这样的价值

  

590380500

但我只想添加和删除一个值,而不是全部 例如: - 如果我在对话框中选择590,则它应该只显示580。

1 个答案:

答案 0 :(得分:0)

我已经解决了一半,但仍然只有一个问题,即价值不会显示在不同的行但是在一行中

 <td class="text-xs-left">
    <v-edit-dialog
      v-for="value in props.item.values"
       @open="temp = props.item.values"                                           
       large
       lazy>
    <div>{{value}}</div>
     <div slot="input" class="mt-3 title">Update Iron</div>
    <v-text-field
     slot="input"
      label=""
    v-model="temp"
    single-line
    counter
    autofocus
    ></v-text-field>
    </v-edit-dialog>

    </td>

现在可以单击单个条目,但在表格中,它显示如下

  

590380500

但我希望这样 590个
380个
500个
我试过用

<div>{{value}}<br></div>

但它不会工作..任何人都知道它应该如何运作