どれかひとつでもチェックが入った場合は、v-ifで表示の切り替えを行いたい

Question

チェックボックスでどれかひとつでもチェックが入った場合は、v-ifで表示の切り替えを行いたいと思っています。
また、チェックがついた後、全てのチェックを外した場合は初期の表示に戻したいです。

 <ul div=“check”>
      <li>りんご</li>
      <li><input type="checkbox"></li>
      <li>みかん</li>
      <li><input type="checkbox"></li>
      <li>なし</li>
      <li><input type="checkbox" ></li>
 </ul>


<div v-if=“[type="checkbox”].checked”>チェックが入ってないよ</div>  
// チェックがひとつも入っていない状態（初期の状態）
//  こんなような処理のイメージです

<div v-else>チェックが入ったよ</div>    // チェックがひとつでも入った場合

知りたいこと
v-ifの箇所とjs側でどのようにコードを記載をすれば画面を切り替えることができるのか

Answer 1

v-modelを使ってチェックされた値が入ってる配列の要素数が1以上という判定をすれば可能です。
フォーム入力バインディング - Vue.js

Comments

[tarow]

ご回答を頂き誠にありがとうございました。
参考にさせて頂いたサイトでなんとなくですがやり方が理解できました。

Answer 2

nt4cさんの回答で9割終わってますが、
最後のひと押しを解説します。

まず<input type="checkbox" id="john" value="John" v-model="checkedNames">という感じでvalueとv-modelで何に属するかを決めます。
すると配列で束縛された結果が取れますが、
この時、配列なので配列が所持しているプロパティが使えます。

JavaScriptの全ての配列はlengthプロパティを所持していますので、
これが0件、もしくは1件以上かで処理を変えれば良いのです。

条件付きレンダリングの項目を確認したところ
v-ifの中には式が普通に書けるので
束縛したチェック項目をcheckedFoodsみたいな感じの名前として考えた場合、こんな感じで動くんじゃないですか？

<div v-if="checkedFoods.length == 0">
  チェックが入ってないよ
</div>
<div v-else>
  チェックされたよ！
</div>

Comments

[tarow]

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

教えて頂いた情報を参考にコードを書き直し、思った動作ができました！
私は、下記のコードで一応は動いたのですが、もしさらに改善点があれば教えてもらえますと幸いです。

<div id="app">
<ul div=“check”>
<li>りんご</li>
<li><input type="checkbox" id="john" value="John" v-model="checkedNames"></li>
<li>みかん</li>
<li><input type="checkbox" id=“ken” value=“Ken” v-model="checkedNames"></li>
<li>なし</li>
<li><input type="checkbox" id=“taro” value=“Taro” v-model="checkedNames"></li>
</ul>

<div v-if="checkedNames.length == 0">チェックが入ってないよ</div>

<div v-else>チェックが入ったよ</div>

</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var ken = new Vue({
el: '#app',
data: {
checkedNames: []
}
})
</script>

[miyabi-sun]

お、うまく行きましたか！ナイスです。

改善点としてはリストは箇条書きという意味なのに
チェックボックスしかない行があって、その次の行に項目名があるってのが「セマンティックHTML」の観点で微妙かなって感じですね。
https://webmemo.work/about-semantic/

綺麗に書くならこんな感じでしょうか。
余裕があれば勉強してみてください。
<li>
<label>
りんご
<input type="checkbox">
</label>
</li>