質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.04%

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

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 958

score 55

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

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

動作の流れ
1、ロード時、リストが全件表示される(v-forでの処理)
2、jQueryでdivのインナーにHTML要素を追加する
3、vue.jsでフィルタを掛け、表示件数の絞りこみを行う(一度0件にする)
4、vue.jsのフィルタを解除し、リストを再表示させる
5、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要素を維持させておくことはできるのかどうか。(なぜ消えてしまうのかも知りたいです。)
・上記を行いたい場合、他にいい記述方法などがあるのかどうか

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • yambejp

    2019/12/10 09:37

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

    キャンセル

  • tomato01

    2019/12/11 21:00

    ご回答を頂きありがとうございます。(連絡が遅くなり失礼致しました。)

    併用した理由は、自分ができそうな範囲で実装したので、私も併用しないのが望ましいと考えておりました。

    ただ、jQueryの実装した内容がvueで落とし込めず併用することになりました。
    もし可能でしたら、vueの場合ですとどのように記載をすればいいかご教授頂けますと幸いです。

    キャンセル

回答 1

checkベストアンサー

+1

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

<div id="app">
  <div class="item" v-for="(product, index) in List" :key="product.id" >
    <label>
      <div class="detail">{{product.title}}
        <div class="inner">
          <button @click="add_link(index)">
          </button>
        </div>
      </div>
    </label>
  </div>
</div>
var app = new Vue({
  el: '#app',
  data: {}, // 記述省略
  computed: {}, // 記述省略
  methods: {
    add_link() {
      // 処理
    }
  }
});

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/12/11 21:08

    ご回答を頂きありがとうございます。(連絡が遅くなり失礼致しました。)

    また、サンプルコードの記載を頂きありがとうございます。

    一度頂いたコードで試してみたいと思いますが一点質問があります。

    export default の記載ですが、vueのファイルの中に記載をするものになりますでしょうか。もしくはHTMLのしたに記載をすれば処理がされるのでしょうか。

    キャンセル

  • 2019/12/12 12:18

    申し訳ありません、混乱させてしまったようなのでHTMLとJS用に回答を調整しました。
    ご質問の箇所はjs側に記述すべき内容です。

    キャンセル

  • 2019/12/12 12:35

    ご回答を頂きありがとうございます。

    内容理解致しました!こちらの内容で試してみます。
    丁寧なご回答をいただき誠にありがとうございました。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.04%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る