こんにちは。お世話になります。

現象

Vue.jsでTo Doリストを作っていますが、マスタッシュ構文が反映されません。また、Vue.jsが書かれた.jsファイルに問題が2個発生します。

期待値

マスタッシュ構文が反映されない理由と、反映させる方法を知りたいです。
また、Vue.jsが書かれた.jsファイルに問題が発生する理由と、正しいコードを知りたいです。

再現手順

下記コードをブラウザで実行していただければ、再現できます。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>todo app</title>
7</head>
8<body>
9    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
10    <form id="app">
11        <ul>
12            <li>
13                <label for="name">Name:</label>
14                <input v-model="form.name" type="text" id="name" name="user_name">
15                <small v-bind:class="{'is-hide': validation.name }">{{ errorMessage.name }}</small>
16            </li>
17            <li>
18                <label for="mail">E-mail:</label>
19                <input v-model="form.email" type="email" id="mail" name="user_email">
20                <small v-bind:class="{'is-hide': validation.email}">{{ errorMessage.email }}</small>
21            </li>
22            <li>
23                <label for="msg">Message:</label>
24                <textarea v-model="form.message" name="user_message" id="msg" cols="30" rows="10"></textarea>
25                <small v-bind:class="{'is-hide': validation.msg}">{{ errorMessage.msg }}</small>
26            </li>
27        </ul>
28        <div class="btn-container"><button type="submit" v-bind:disabled="!isValid" class="btn btn-primary">送信</button></div>
29    </form>
30</body>
31</html>

JavaScript
1var app = new Vue({
2    el: '#app',
3    data: {
4        form: {
5          name: '',
6          email: '',
7          msg: ''
8        },
9        errorMessage: {
10          name: '名前を入力してください',
11          email: 'メールアドレスを入力してください',
12          msg: 'メッセージを入力してください'
13      }
14    },
15  
16    computed: {
17      validation() {
18            name : !form.name,
19            email : (() => {
20              if(!!form.email) {
21                if (!form.email.match(/^[A-Za-z0-9]{1}[A-Za-z0-9_.-]*@{1}[A-Za-z0-9_.-]{1,}.[A-Za-z0-9]{1,}$/)) {
22                  return false
23                }
24                return true
25              } else {
26                return false
27              }
28            })(),
29            msg : if (form.msg == null || form.msg == '') {
30                    return errorMessage.msg;
31                  }          
32        },
33        isValid() {
34          var validation = this.validation
35          return Object.keys(validation).every(function (key) {
36            return validation[key]
37        })
38      }
39    }
40  })

何卒宜しくお願い致します。

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

回答1件

再現できるも何もただのエラーコードですよね？
『マスタッシュ構文が反映』される以前の問題だと思います。

javascript
1            msg : if (form.msg == null || form.msg == '') {
2                    return errorMessage.msg;
3                  }

式と値がごちゃごちゃですし実行すらできないです。
もう少しプログラムを小さくしてcomputedとかの動作を見直しして書いたほうがいいです。

投稿2020/07/05 07:38

sousuke

総合スコア3830

退会済みユーザー

2020/07/06 09:37

ご回答ありがとうございます。もう少しプログラムを小さくして、というか一から書き直してみます！

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

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

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

Vue.jsでTo Doリストを作っていますが、マスタッシュ構文が反映されません。また、Vue.jsが書かれた.jsファイルに問題が発生します。

現象

期待値

再現手順

関連した質問