Vueダイナミックフォームの詳細な応用

<input type="text" v-model="もの">

<!-- 以下と同等 -->
<input type="text" v-bind:value="thing" 
       v-on:input="もの = $イベントターゲット値">

<!-- reply.vue -->
<テンプレート>
  <div>
    <li>
      <div v-if="data.id != 0" @click="getfid(data.id)" :id="data.id"> {{ data.name }}</div>
      <ul v-if="data.children && data.children.length > 0">
        <Reply v-for="child in data.children" :key="child.id" :data="child"/>
      </ul>
    </li>
  </div>
</テンプレート>

<スクリプト>

  './bus.js' からバスをインポートします。

  エクスポートデフォルト{

    //名前を宣言する name: "Reply",
    プロパティ: ['データ'],
    //コンポーネントを宣言します components: {},
    //変数data()を宣言する{
      戻る {
        フィド: 0,
      }
    },
    //カスタムフィルター フィルター: {
      myfilter: 関数 (値) {
        値 = value.slice(0, 3);
        戻り値 + "********";
      }
    },
    // 初期化メソッドmounted() {
    },
    //メソッドを宣言する methods: {
      //カテゴリーIDをクリック
      getfid: 関数 (fid) {
        _fid_ は、_fid_ の後に続くすべての要素で構成されます。
        //コンソールログ(this.fid);
        バス.$emit("msg", fid);
        localStorage.setItem("fid", this.fid);

        //すべてのハイライトをキャンセルします var divs = document.getElementsByClassName("bg");

        //セレクターをトラバースする for (var i = divs.length - 1; i >= 0; i--) {

          //ハイライトを解除 divs[i].classList.remove("bg");

        }
        //まず、現在の要素を強調表示します var mydiv = document.getElementById(fid);
        // ハイライト クラス セレクターを動的に追加します。mydiv.classList.add("bg");
      }
    }
  }
</スクリプト>


<スタイル>

  ul {
    左パディング: 10rem;
    リストスタイル: なし;
  }

  .bg {
    背景: オレンジ;
    色: 白;
  }
</スタイル>

<!--bus.js-->
'vue' から Vue をインポートします

デフォルトの新しい Vue() をエクスポートします。

<テンプレート>
  <div>
    <heads></heads>
    <h1>コース提出ページ</h1>
    <返信:data="mydata"/>
    <バンセルグループ>
      <van-field label="コースタイトル" v-model="title"/>
      <van-field label="コースの説明" v-model="desc" rows="5" type="textarea"/>
      <van-field label="コース料金" v-model="price"/>

      <div v-for="(値、キー、インデックス) パラメータ内">
        <van-field :label="キー" v-model="情報[キー]"/>
      </div>

      <van-button color="gray" @click="addcourse">コースを保存</van-button>
    </バンセルグループ>
  </div>
</テンプレート>

<スクリプト>

  //他のコンポーネントをインポートするimport bus from './bus.js';
  「./reply」から返信をインポートします。
  「./heads」からヘッドをインポートします。


  エクスポートデフォルト{

    //コンポーネントを宣言: {
      「返信」: 返信、
      「ヘッド」：ヘッド、
    },
    //コンストラクタが作成されました() {
      //バスを監視します。$on('msg', target => {
        console.log(ターゲット);
        this.fid = ターゲット;
        (this.cid === 0)の場合{
          this.get_cate(this.fid)
        } それ以外 {
          this.$toast.fail("コースはすでに保存されているため、カテゴリを再度選択することはできません");
          false を返します。
        }
      });
    },
    //変数data()を宣言する{
      戻る {
        //データ mydata: {},
        //コースカテゴリID
        fid: localStorage.getItem("fid"),
        タイトル： ""、
        価格： ""、
        説明: "",
        cid: 0,
        動画: [],
        ビデオrc: "",
        パラメータ: {},
        情報： {}
      }
    },
    // 初期化メソッドmounted() {
      データを取り出します。
    },
    //メソッドを宣言する methods: {
      get_cate(fid) {
        this.axios.get('http://localhost:5000/getcate/', {params: {'fid': fid}}).then(result => {
          var myparams = result.data.params;
          if (myparams === '') {
            マイパラメータ = null
          }
          myparams = JSON.parse(myparams)
          this.params = myparams

          for (var キー in this.params) {
            this.$set(this.info, キー, '')
          }
          console.log(この情報)
        })
      },
      //コースを追加する addcourse: function () {
        var リスト = [];
        for (var key in this.info) {
          lists.push({'key': キー、'value': this.info[key]、'label': this.params[key]})
        }

        var list_str = JSON.stringify(リスト)

        var data_post = {
          fid: this.fid、
          タイトル: this.title,
          説明: this.desc,
          価格: this.price,
          id: localStorage.getItem("user_id"),
        }
        リストの長さが0より大きい場合
          データ投稿 = {
            fid: this.fid、
            タイトル: this.title,
            説明: this.desc,
            価格: this.price,
            id: localStorage.getItem("user_id"),
            パラメータ:list_str
          }
        }

        this.axios.post(
          'http://localhost:5000/addcourse/',
          this.qs.stringify(data_post)).then((結果) => {
          結果データコード === 200 の場合
            this.$toast.success('コースが正常に追加されました');
            this.cid = 結果データ.cid;
          } それ以外 {
            this.$toast.fail(結果データmsg);
          }
        });
      },
      //データを取得する get_data: function () {
        //リクエストを送信 this.axios.get(
          'http://localhost:5000/catelist/').then((結果) => {
          console.log(結果);
          //ルートノードを宣言します var mytree = {'id': 0, name: ""};
          mytree['children'] = 結果.data;
          mytree をコピーします。
          コンソールにログ出力します。
        });
      }
    }
  }
</スクリプト>


<スタイルスコープ>

  ul {
    左パディング: 10rem;
    リストスタイル: なし;
  }

</スタイル>