Question

使用Vue.js，我试图通过单击标记为Add new row的按钮向表中添加更多行。表格行包含语义UI下拉列表。一切正常，但我面临以下两个问题：

为了使语义UI下拉动画在新添加的行中起作用，我必须在单击Add new row之后再次添加下拉javascript代码。我在以下链接中包含了代码：https://www.grillies.ca/ui.js。您还可以看到我用来附加外部js文件的代码，以初始化下面的下拉菜单。在单击Add new row按钮后，无需追加外部js，有什么方法可以使动画工作吗？我必须使用一个外部js文件，因为它将具有许多针对其他语义UI元素的功能。我想要的不是每次我动态添加新的语义UI元素时都附加JavaScript代码。
我面临的第二个问题是，当我单击Remove按钮时，只有最后一行被删除。我只想删除已单击按钮的行。

我在StackOverflow上寻找了很多答案，但找不到类似的东西。这是我的代码：

// Vue js code starts
new Vue({
  el: "#app",
  data: {
    languages: [{
        name: "Learn JavaScript",
        id: 1
      },
      {
        name: "Learn Vue",
        id: 2
      },
      {
        name: "Play around in JSFiddle",
        id: 3
      },
      {
        name: "Build something awesome",
        id: 4
      }
    ],
    rows: [1], //loops running by default
  },
  methods: {
    addMoreCombination() { //function for adding more rows
      this.rows.push({})
      //script to append external js start here
      let scriptForAppend = document.createElement('script')
      scriptForAppend.setAttribute('src', 'https://www.grillies.ca/ui.js')
      document.head.appendChild(scriptForAppend);
      //script to append external js ends here

    },

    deleteRow(index) {
      //function to remove that particular row
      this.rows.splice(index, 1)
    }

  }
})

//Semantic UI js Code to initialize the HTML dropdown (also included in https://www.grillies.ca/ui.js for appending after each click)
$('.ui.dropdown').dropdown();

<html>

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"></script>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" />

</head>

<body>
  <div id="app">

    <table class="ui celled table">
      <tr v-for="(input, index) in rows" :key="index">
        <td>
          <select class="ui search dropdown">
            <option value="">State</option>
            <option v-for="language in languages" :key='language.id' :value="language.id">{{language.name}}</option>
          </select>
        </td>
        <td>
          <select class="ui search dropdown">
            <option value="">State</option>
            <option v-for="language in languages" :key='language.id' :value="language.id">{{language.name}}</option>
          </select>
        </td>

        <td><button class="ui button red" @click="deleteRow(index)">Remove</button>
        </td>
      </tr>
    </table>
    <button type="button" class="ui basic button mb20 small" @click="addMoreCombination">
              Add new row
   </button>

  </div>


</body>

</html>

如何通过Vue.js将语义UI Javascript代码应用于动态加载的元素

0 个答案: