if文でtrueの時にモーダルウィンドウを表示したい。

現在コンポーネント内のメソッドに条件分岐をつけているのですが
その中でif文trueになった時モーダルウィンドウを表示したいです。
参考のモーダルウィンドウはクリックイベントを発生させて表示するものしか見当たらず、どうやって実装すればいいのかイメージができません。
どんな風につくると良いでしょうか？アドバイス頂ければ幸いです

index.html
1            <!-- モーダルウィンドウテスト実装 -->
2            <div id="modal">
3            <button v-on:click="openModal">Click</button>
4            <div class="overlay" v-show="showContent" v-on:click="closeModal">
5            <div class="content">
6              <p>これがモーダルウィンドウです。</p>
7              <button v-on:click="closeModal">close</button>
8            </div>
9            </div>
10          </div>
11    <div id="board">
12        登録日：
13        ・・・・

index.js

vue
1//モーダルテスト
2 el: '#modal',
3  data: {
4    showContent: false
5  },
6  methods:{
7    openModal: function(){
8      this.showContent = true
9    },
10    closeModal: function(){
11      this.showContent = false
12    }
13  }
14})
15
16
17Vue.component("xxx-xx", {
18  props: ["xxx"],
19  template: `<div class="abc">
20     {{ abc }}
21   </div>,
22  methods: {
23//ここにモーダルウィンドウを表示する動きをかきたいです。

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

回答1件

ベストアンサー

参考のモーダルウィンドウはクリックイベントを発生させて表示するものしか見当たらず、どうやって実装すればいいのかイメージができません。

<v-dialog ...>を使う、という選択肢はありませんか。

追記。

＞vue側の条件分岐でtrueになったとき」の部分は提示されていない、という認識でいいですね。

→はい、認識あっております。

＞vue側の条件分岐でtrueになったとき」が``if (hogehoge) { ... }だとします。そうなのであれば、if (hogehoge) { ... ; this.showContent = true; ...}`とすればいいのでは?

→すみません、私の理解が乏しいのでコードに書いてみました。下記の考えであってますでしょうか？m(_ _)m

どこかのHelloWorldを改変して、想像の範囲でやりたいであろうことを書いてみました。hoge.htmlに保存すれば動くはずです。

メソッドに条件分岐をつけているのですが

「メソッド」はdoChange()、「分岐条件」はthis.inputNumber % 2 == 0と読み替えてください。

html
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5  <meta charset="UTF-8">
6  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
7  <title>Title</title>
8</head>
9
10<body>
11  <div id="app">
12    <div> testVal: {{ testVal }} </div>
13    <div> inputNumber: <input type="number" v-model="inputNumber" @change="doChange"> / {{inputNumber}} </div>
14    <div>showContent: {{showContent}}</div>
15    <div>history: {{history}}</div>
16    <div id="modal">
17      <button v-on:click="openModal">Click</button>
18      <div class="overlay" v-show="showContent" v-on:click="closeModal">
19        <div class="content">
20          <p>これがモーダルウィンドウです。</p>
21          <button v-on:click="closeModal">close</button>
22        </div>
23      </div>
24    </div>
25  </div>
26</body>
27<script>
28  const app = new Vue({
29    el: '#app',
30    data: {
31      testVal: 'Hello World!',
32      showContent: false,
33      inputNumber: 0,
34      history: []
35    },
36    methods: {
37      openModal() {
38        this.showContent = true
39      },
40      closeModal() {
41        this.showContent = false
42      },
43      doChange() {
44        this.showContent = this.inputNumber % 2 == 0
45        this.history.push(this.inputNumber, this.showContent)
46      }
47    }
48  });
49</script>
50
51</html>

投稿2021/09/27 23:03

編集2021/09/29 12:35

shiketa

総合スコア4061

anzi1230

2021/09/27 23:51

教えて頂いてありがとうございます Vuetifyは使っていませんがしらべたらモーダル・ダイアログ・ポップアップと種類があるんですね。φ(..) 実施したいのはhtml側でイベントが発火された時のタイミングではなく vue側の条件分岐でtrueになったときなので書き方が分からないんんですよね。。＾＾；難しぃ

shiketa

2021/09/28 09:50

「vue側の条件分岐でtrueになったとき」の部分は提示されていない、という認識でいいですね。「vue側の条件分岐でtrueになったとき」が``if (hogehoge) { ... }`だとします。そうなのであれば、`if (hogehoge) { ... ; this.showContent = true; ...}`とすればいいのでは?

shiketa

2021/09/28 10:01

タグがvuejsではなくvuexですね。よみ間違いがありました。わたしはお役に立てそうにありません...

anzi1230

2021/09/29 10:58

ご返信有難うございます！申し訳ありません、タグが間違っておりました（修正いたしました）・やりたい事は、shiketaさんがまさに書いてくださった事です。ありがとうございます！＞vue側の条件分岐でtrueになったとき」の部分は提示されていない、という認識でいいですね。 →はい、認識あっております。＞vue側の条件分岐でtrueになったとき」が``if (hogehoge) { ... }`だとします。そうなのであれば、`if (hogehoge) { ... ; this.showContent = true; ...}`とすればいいのでは? →すみません、私の理解が乏しいのでコードに書いてみました。下記の考えであってますでしょうか？m(_ _)m ------------------------------------------------------ Vue.component("xxx-xx", { props: ["xxx"], template: `<div class="abc"> {{ abc }} 　　　　//①ここにモーダルのhtmlを追加　　　　<div class="overlay" v-show="showContent" v-on:click="closeModal"> <div class="content"> <p>これがモーダルウィンドウです。</p> <button v-on:click="closeModal">close</button> </div> </div> 　<p> </div>, ②dataをのshowContetを追加　data: { 　 showContent: false methods: { ③条件分岐でtrueの動きを追加 if (hogehoge) { ... ; this.showContent = true; ...}

anzi1230

2021/09/30 06:04

ご回答ありがとうございます！！！正直申し上げますと、なんとなく分かったような分からないようなという所です。 this.showContent = this.inputNumber % 2 == 0これは入力値を2で割って余りゼロの時 this.showContentがtrueになるということでしょうか？

shiketa

2021/09/30 13:08 編集

読みにくければ、こう書いても構いませんが。 ``` if( this.inputNumber % 2 == 0 ) this.showContent = true else this.showContent = false ```

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