vue.jsでフィルタをかけた後に、リストを再表示させるとjQueryで追加した要素が消えてしまう。

よろしくお願い致します。

vue.jsでフィルタをかけた後に、リストを再表示させるとjQueryで追加した要素が消えてしまうという現状に遭遇しております。

動作の流れ
１、ロード時、リストが全件表示される(v-forでの処理)
２、jQueryでdivのインナーにHTML要素を追加する
３、vue.jsでフィルタを掛け、表示件数の絞りこみを行う（一度０件にする）
４、vue.jsのフィルタを解除し、リストを再表示させる
５、jQueryで追加をしたHTML要素が消えてしまっている

実際に使用しているコードは下記になります。

HTML

<div id="app">
	
	<input type="checkbox" checked v-model="show1" data-category="1">
	<input type="checkbox" checked v-model="show2" data-category="2">
	<input type="checkbox" checked v-model="show3" data-category="3">

	<div class="item" v-for="product in List" :key="product.id" >
			<label><div class="detail">{{product.title}}
					<div class="inner" ></div></div>
			</label>
	</div>

</div>

<script>
$(function() {
        setTimeout(function(){
$('.inner').each(function(index) {
    $(this).append('<button onClick="add_link(' + index + ')"/>' + '' + '</button>');
});
},3000);
});
</script>

vue

var app = new Vue({
  el: '#app',
  data: {
    show1: true,
    show2: true,
    show3: true,
    products: [],
  },

    computed: {
      List: function() {
        var newList = [];
        for (var i=0; i<this.products.length; i++) {
        
          var isShow = true;
        
          if (!this.show1 && this.products[i].type == 1) {
            isShow = false;  
          }
          if (!this.show2 && this.products[i].type == 2) {
            isShow = false; 
          }
          if (!this.show3 && this.products[i].type == 3) {
            isShow = false; 
          }
          if (isShow) {
            newList.push(this.products[i]);
          }
        }
        // 絞り込み後の商品リストを返す
        return newList;
      }
  },
});

//配列（products）取り出しの記述は省略しております。

知りたいこと
・vue.jsでフィルタを掛け表示件数の絞りこみを行った後、再表示をさせた際にjQueryで追加をしたHTML要素を維持させておくことはできるのかどうか。（なぜ消えてしまうのかも知りたいです。）
・上記を行いたい場合、他にいい記述方法などがあるのかどうか

yambejp

2019/12/10 00:37

jQueryとvue.jsを併用する必要があるのでしょうか？

tomato01

2019/12/11 12:00

ご回答を頂きありがとうございます。（連絡が遅くなり失礼致しました。）併用した理由は、自分ができそうな範囲で実装したので、私も併用しないのが望ましいと考えておりました。ただ、jQueryの実装した内容がvueで落とし込めず併用することになりました。もし可能でしたら、vueの場合ですとどのように記載をすればいいかご教授頂けますと幸いです。

行動規範の内容に同意します

回答1件

ベストアンサー

jQueryと併用すること自体に無理が生じているので、jQueryにこだわらないのであれば下記の方法で問題ないように思えます。
jQueryで追加している箇所はhtml側に記述しadd_linkの処理はmethodsで行うようにすれば簡潔に収まります。
まとめるためにvueの記述で書きますが要点は同じです。

html
1<div id="app">
2  <div class="item" v-for="(product, index) in List" :key="product.id" >
3    <label>
4      <div class="detail">{{product.title}}
5        <div class="inner">
6          <button @click="add_link(index)">
7          </button>
8        </div>
9      </div>
10    </label>
11  </div>
12</div>

js
1var app = new Vue({
2  el: '#app',
3  data: {},　// 記述省略
4  computed: {}, // 記述省略
5  methods: {
6    add_link() {
7      // 処理
8    }
9  }
10});

投稿2019/12/10 01:25

編集2019/12/12 03:17

nt4c

総合スコア768

tomato01

2019/12/11 12:08

ご回答を頂きありがとうございます。（連絡が遅くなり失礼致しました。）また、サンプルコードの記載を頂きありがとうございます。一度頂いたコードで試してみたいと思いますが一点質問があります。 export default の記載ですが、vueのファイルの中に記載をするものになりますでしょうか。もしくはHTMLのしたに記載をすれば処理がされるのでしょうか。