Vue-級聯下拉框

 

                                    <tr>
                                                <td>所屬欄目：</td>
                                                <td>
                                                    <select class="input input-small required" name="Navigate2" id="Navigate2" @change="getChild()"
                                                            style="width: 152px" required>
                                                        <option value="-1" disabled selected>請選擇</option>
                                                        <option v-for="sort in navigate" v-bind:value="sort.id" v-if="sort.parentId==null&&sort.name!='機構設置'" value="{{sort.id}}" >
                                                                {{sort.name}}
                                                        </option>
                                                    </select>
                                                </td>
                                            </tr>
                                            <tr id="navigate">
                                                <td>所屬子欄目：</td>
                                                <td>
                                                    <select class="input input-small required" name="navigate" id="navigate"
                                                            style="width: 152px" required>
                                                        <option value="-1" disabled selected>請選擇</option>
                                                        <option v-for="sort2 in navigate" v-bind:value="sort2.id" v-if="sort2.parentId==a&&sort2.name!='人才政策'" value="{{sort2.id}}">
                                                            {{sort2.name}}
                                                        </option>

                                                    </select>
                                                </td>
                                            </tr>

function getVue(r, s) {

          v = new Vue({
              el: "#app",
              data: {
                  //數據賦值操作
                  result: r,
                  //新聞來源
                  newsSource: r.resultObj[0],
                  type: r.resultObj[1],
                  navigate:r.resultObj[2],
                  a:"test"
                  //v-model綁定
              },
              methods: {
                  getChild: function () {
                      this.$data.a = $("#Navigate2").val();
                  },
              }
          });

      }