Question

我在页面上列出了所有事情。我希望用户能够单击列表中的项目，然后打开一个模式对话框，该对话框具有相对复杂的形式，其中包含每个项目的数据。我已经使用Vue.js实现了该表单，到目前为止，它仍然可以工作，但是我无法弄清楚如何使Vue从一项的数据切换到另一项的数据，或者执行与那个。

这些示例使组件看起来像是用于小物件而不是整个表格。这是来自JS小提琴的JavaScript，上面有一个匆忙编码的示例，与我想做的类似。

HTML：

<table>
  <thead>
    <tr>
      <th scope="col">Item</th>
      <th scope="col">Data</th>
    </tr>
  </thead>
  <tbody>
    <tr data-identifier="1">
      <td><a>Item 1</a></td>
      <td class="json">{ "id": "1", "formData": { "whichOption": "1", "optionOneSetting": "ONE AYE", "optionTwoSetting": null, "optionThreeSetting": null } }</td>
    </tr>
    <tr data-identifier="2">
      <td><a>Item 2</a></td>
      <td class="json">{ "id": "2", "formData": { "whichOption": "2", "optionOneSetting": null, optionTwoSetting": "two-b", "optionThreeSetting": null } }</td>
    </tr>
    <tr data-identifier="3">
      <td><a>Item 3</a></td>
      <td class="json">{ "id": "3", "formData": { "whichOption": "2", "optionOneSetting": null, "optionTwoSetting": "two-c", "optionThreeSetting": null } }</td>
    </tr>
    <tr data-identifier="4">
      <td><a>Item 4</a></td>
      <td class="json">{ "id": "4", "formData": { "whichOption": "3", "optionOneSetting": null, "optionTwoSetting": null, "optionThreeSetting": "true" } }</td>
    </tr>
    <tr data-identifier="5">
      <td><a>Item 5</a></td>
      <td class="json">{ "id": "5", "formData": { "whichOption": "1", "optionOneSetting": "ONE AYE AGAIN", "optionThreeSetting": null } }</td>
    </tr>
  </tbody>
</table>

<div id="app" class="hidden">
  <select v-model="formData.whichOption">
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>
  <label v-if="formData.whichOption==1">1-A: <input type="text" v-model="formData.optionOneSetting" /></label>
  <div v-if="formData.whichOption==2">
    <label><input type="radio" name="optionTwoSetting" value="two-a" v-model="formData.optionTwoSetting" /> 2-A</label>
    <label><input type="radio" name="optionTwoSetting" value="two-b" v-model="formData.optionTwoSetting" /> 2-B</label>
    <label><input type="radio" name="optionTwoSetting" value="two-c" v-model="formData.optionTwoSetting" /> 2-C</label>
  </div>
  <div v-if="formData.whichOption==3">
    <label><input type="checkbox" name="optionThreeSetting" value="three" v-model="formData.optionThreeSetting" /> 3-A</label>
  </div>
  <button v-on:click="doMagic">Do a Thing</button>
</div>

JavaScript：

$(document).ready(function() {
    $("a").click(function() {
        var data = $(this).closest("tr").find("td.json").text();
        data = JSON.parse(data);

        if (!document.vue) {
            document.vue = new Vue({
                el: "#app"
              , data: data
              , methods: {
                    doMagic: function(event) {
                        var $tr = $("tr[data-identifier=" + this.id + "]");
                         console.log($.extend({}, this));

                         $tr.find(".json").text(JSON.stringify({
                             "id": this.id
                           , "formData": this.formData
                         }));
                    }
                 }
            })
            $("#app").removeClass("hidden");
        }
        else {
            // This isn't expected to work, but it's effectively what I'd like to happen.
            document.vue.data = data;
        }
    })
})

https://jsfiddle.net/don01001100/eywraw8t/370396/

在Vue.js中重用表单

0 个答案: