[Vue.js] 連動下拉選單 with ASP.net Core

by ShadowKao

HTML

<!DOCTYPE html>
<html>

  <head>
    <meta name="viewport" content="width=device-width" />
    <title>Edit</title>
  </head>

  <body>
    <form>
      <div id="app">
        第一層:
        <select name="parent" v-model.number="parentid" v-on:change="ParetnChange">
				<option value="-1">請選擇</option>
         <option value="1">A</option>
          <option value="2">B</option>
          <option value="3">C</option>
</select>
        <br /> 第二層:
        <select name="children" v-model.number="childrenid">
                <option v-for="(c,index) in childrens" v-if="childrens.length > 0" v-bind:value="c.Value" > 
								<!--留意 c 物件屬性有區分大小寫-->
                    {{c.Text}}
                </option>
            </select>
        <br />
        <button type="button" v-on:click.prevent="MySubmit">送出</button>
        <hr />
        <div v-if="showResult!==''">
          送出資料↓
          <br /> {{showResult}}
        </div>
      </div>
    </form>
    <!-- 引用jQuery 目的要發Ajax -->
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <!--引用Vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
    <script type="text/javascript">
      let data = [{
        "id": 1,
        "pid": 0,
        "text": "A"
      }, {
        "id": 2,
        "pid": 0,
        "text": "B"
      }, {
        "id": 3,
        "pid": 0,
        "text": "C"
      }, {
        "id": 4,
        "pid": 1,
        "text": "a"
      }, {
        "id": 5,
        "pid": 1,
        "text": "aa"
      }, {
        "id": 6,
        "pid": 1,
        "text": "aaa"
      }, {
        "id": 7,
        "pid": 2,
        "text": "b"
      }, {
        "id": 8,
        "pid": 2,
        "text": "bb"
      }, {
        "id": 9,
        "pid": 2,
        "text": "bbb"
      }, {
        "id": 10,
        "pid": 3,
        "text": "c"
      }, {
        "id": 11,
        "pid": 3,
        "text": "cc"
      }, {
        "id": 12,
       ...