85774

[code]

    <div id="test" v-if="seen">
      <p>あいうえお</p>
      <button @click="remove">削除</button>
    </div>
    
[/code]

上記のHTMLでbutton をクリックすると、seen が false になり、全体が消えるvue を書いたのですが、効かないようです。

[code]

    <div id="test">
      <p v-if="seen">あいうえお</p>
      <button @click="remove">削除</button>
    </div>
    
[/code]

次に、v-if を button の兄弟要素であるpに設定すると、その兄弟要素は消えて動作するようです。

したいことは、親要素であるdiv を削除したいのですが、不可能なのでしょうか？


CC BY-SA 4.0
2022-01-18T05:30:54.957
85771
2022-01-18T09:14:01.787
50616
question
javascript html vue.js
vue 3 親要素に v-if を指定して表示切替を行うことはできないのでしょうか？


特に問題なく動作可能です  
もしかすると `id="test"` で `mount`してませんか？ その場合 `v-if`を下位要素に指定してみてはどうでしょう

[code]

    <!DOCTYPE html>
    <html lang="ja">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=1024, initial-scale=1.0">
        <title>Document</title>
      <script src="https://unpkg.com/vue@3"></script>
    </head>
    <body>
      <div id="event-handling">
        <div v-if="type === 'A'">
          A
        </div>
        <div v-else-if="type === 'B'">
          B
        </div>
        <div v-else-if="type === 'C'">
          C
        </div>
        <div v-else>
          Not A/B/C
        </div>
        <button v-on:click="chg">変更</button>
        
      </div>
    </body>
    <script type="text/javascript">
    const EventHandling = {
      data() {
        return {
          cnt: 0,
          type: 'A',
        }
      },
      methods: {
        chg() {
          if (++this.cnt > 2) this.cnt = 0
          this.type = 'ABC'[this.cnt]
          console.log(this.cnt)
          console.log(this.type)
        }
      }
    }
    
    Vue.createApp(EventHandling).mount('#event-handling')
    </script>
    </html>
    
[/code]

* * *

### 追記

`button` 要素を `div`の下位に配置しても動作可能です

[code]

        <div v-if="type === 'A'">
          A
          <button v-on:click="chg">変更</button>
        </div>
        <div v-else-if="type === 'B'">
          B
        </div>
        <div v-else-if="type === 'C'">
          C
        </div>
        <div v-else>
          Not A/B/C
        </div>
    
    
[/code]


CC BY-SA 4.0
2022-01-18T06:35:21.927
85774
2022-01-18T09:14:01.787
2022-01-18T09:14:01.787
43025
43025
85771
answer