Vue 2.0+ Draggula, поток данных в v-for, отдельная область действия для v-модели для каждого элемента - PullRequest
Новая
       19

Vue 2.0+ Draggula, поток данных в v-for, отдельная область действия для v-модели для каждого элемента

0 голосов
/ 20 сентября 2018

Сначала посмотрите на этот пример: https://jsfiddle.net/9Lk3pfdw/

<code><div id="app">
  <div class="row">
    <div class="col p-3" style="border: 1px solid gray;">
      <draggable element="ul" v-model="todos" :options="listOptions">
        <transition-group type="transition" :name="'flip-list'">
          <li class="d-flex align-items-center align-content-center" v-for="element in todos"
              :key="element.order">
            {{element.text}}
          </li>
        </transition-group>
      </draggable>
    </div>
    <div class="col p-3" style="border: 1px solid gray;">
      <draggable element="div" v-model="todos2" :options="contentOptions">
        <transition-group name="no" class="component-drop-area" tag="ul">
          <div class="component" v-for="(childElement, index) in todos2" :key="index">
            <div class="d-flex row-nowrap px-2 pb-2">
              <input class="w-100" type="text" v-model="childElement.text">
              <div class="my-handle">X</div>
            </div>
          </div>
        </transition-group>
      </draggable>
    </div>
  </div>

  <div class="row pt-3" style="background-color: drak-gray;">
    <div class="col">
      <h4>I don't want to change</h4>
      <hr>
      <pre>{{ listString }}

Я хочу изменить 

{{ list2String }}

Я хочу разделить данные для каждого элемента в правом столбце.Я не совсем уверен, почему v-модель или v-for связывает переменные, подобные этой.Или, может быть, это специфический draggula ... Я ценю любой совет.

...