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

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

ただいまの
回答率

90.36%

  • Vue.js

    831questions

    Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Vue 子のコンポーネントでV-forがうごかない

解決済

回答 2

投稿 編集

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

Blando

score 1

Vueを初めて触りました。
初心者です。
子となるコンポーネントに親からデータを渡さず
子だけでデータ
<child></child>の部分に
コンポーネントのDataCompでのデータを
テンプレートを使用して反映させたいと考えていますが。
できません。

どういった方法で対応するとよいのでしょうか?

<form id="test" @submit="checkForm" action="/something" method="post">
<child></child>


  <p v-if="errors.length">
    <b>Please correct the following error(s):</b>
    <ul>
      <li v-for="error in errors">{{ error }}</li>
    </ul>
  </p>

 <div class="form-group">
   <label for="name">Name</label>
    <input type="text" name="name" id="name" v-model="name" class="form-control">
  </div>

  <div class="form-group">
    <label for="age">Age</label>
    <input type="number" name="age" id="age" v-model="age" min="0" max="130" class="form-control">
  </div>

   <div class="form-group">

    <label for="email">Email</label>
    <input type="email" name="email" id="email" v-model="email" class="form-control">


   </div>

 <div class="form-group">
    <input type="submit" value="Submit" class="btn btn-primary">  
  </div>

</form>

var DataComp = {
    template: '<div v-for="t in todos">{{t.text}}</div>',
    data: function(){
      return {
       todos: [
      { text: "Learn JavaScript", done: false },
      { text: "Learn Vue", done: false },
      { text: "Play around in JSFiddle", done: true },
      { text: "Build something awesome", done: true }
    ]
      }
    }
}

const app = new Vue({
  el:'#test',
  data:{
    errors:[],
    name:null,
    email:null
  },
  components: {
      'child': DataComp,
    },
  methods:{
    checkForm:function(e) {
      this.errors = [];
      if(!this.name) this.errors.push("Name required.");
      if(!this.email) {
        this.errors.push("Email required.");
      } else if(!this.validEmail(this.email)) {
        this.errors.push("Valid email required.");
      }
      if(!this.errors.length) return true;
      e.preventDefault();
    },
    validEmail:function(email) {
      var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
      return re.test(email);
    }

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 2

+1

2箇所ほど気になったところが

  1. templateの下のトップタグは複数禁止...
    DataCompのtemplateですが、
    v-forで複数になる可能性があるのでエラーになります。
template: '<div> <div v-for="t in todos">tt</div> </div>'


とでもして囲む

2.dataは関数で...
親のコンポーネントですが、

data:{
  errors:[],
  name:null,
  email:null
}


と、オブジェクトを入れてます。

data: function () {
  return {
    errors:[],
    name:null,
    email:null
  }
}


で動くかも

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

checkベストアンサー

0

テンプレートのルート要素は1つにする必要があります。
例えば以下のように <div> で囲ってみると動くかと思います。

template: '<div><div v-for="t in todos">{{t.text}}</div></div>',

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

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

  • Vue.js

    831questions

    Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。