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

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

ただいまの
回答率

90.76%

  • JavaScript

    15333questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML

    8336questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • Vue.js

    585questions

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

  • Onsen UI

    314questions

    HTML5で記述されたモバイルアプリの高速化、およびネイティブアプリライクなUIが作れるフレームワーク。 様々なJavaScriptフレームワークと併せて使用することができます。スマートフォン向けアプリ、Webサイトに必要なアニメーション、UI/UXを実装することが可能になります。

Vue.js他の単一ファイルコンポーネントのデータを変更する

解決済

回答 1

投稿

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

syoyu

score 7

Vue.jsでスケジュール管理アプリを制作しています。
homePageに用事のリスト表示を、settingPageで用事の追加をする仕様にしたいです。
list.vueという単一ファイルで用事をリスト表示する機能をコンポーネント化し、homePageで用いており、addPlan.vueという単一ファイルで用事を追加する機能をコンポーネント化し、settingPageで用いようと思っています。
この際に、addPlan.vueファイルの中の処理で、list.vueファイルの中のdataに追加したいのですが、やり方が分かりません。コンポーネントはexport defaultでエクスポートしています。

↓homePage.vue

<template>

    <v-ons-page>

      <custom-toolbar :title="'Home'" :action="toggleMenu"></custom-toolbar>

        <list></list>

    </v-ons-page>
</template>
<script>
  import Vue from 'vue'
  import customToolbar from './toolbar'
  import List from './list.vue'

  export default {
    props: ['toggleMenu'],
    components: { customToolbar }
  }

//コンポーネントを登録
  Vue.component('list',List)

</script>

↓list.vue

<template>
  <div id="list">
    <ul>
      <li v-for="item in lists">
        {{ item.title }}<br>
          {{item.date}}<br>
          {{item.start}}<br>
          {{item.finish}}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'list',

  data:function(){
    return{
      lists:[
        {title:'bar',
         date:'2018/1/10',
         start:'8時',
         finish:'17時',
        },
        {title:'baseball',
         date:'2018/1/15',
         start:'9時',
         finish:'16時',
        },
      ],
      newPlanCostomer:'',
      newPlanDate:'',
      newPlanStart:'',
      newPlanFinish:'',
    }
  },


}
</script>

↓settingPage.vue

<template>
  <v-ons-page>
    <custom-toolbar :title="'Settings'" :action="toggleMenu"></custom-toolbar>
    <add></add>
  </v-ons-page>
</template>

<script>
  import Vue from 'vue'
  import customToolbar from './toolbar'
  import Add from './addPlan.vue'

  Vue.component('add' , Add)

  export default {
    props: ['toggleMenu'],
    components: { customToolbar }
  }
</script>

↓addPlan.vue

<template>
  <div id="add">
    <p>タイトル</p>
    <p><input type="text"
           v-model="newPlanCostomer"
           v-on:keyup.enter="connectCostomer(newPlanCostomer)"></p>

    <p>日付</p>
    <p><input type="text"
          v-model="newPlanDate"
          v-on:keyup.enter="connectDate(newPlanDate)"></p>

    <p>開始時刻</p>
    <p><input type="text"
          v-model="newPlanStart"
          v-on:keyup.enter="connectStart(newPlanStart)"></p>

    <p>終了時刻</p>
    <p><input type="text"
          v-model="newPlanFinish"
          v-on:keyup.enter="connectFinish(newPlanFinish)"></p>

    <button v-on:click="addPlan(newPlanCostomer,newPlanDate,newPlanStart,newPlanFinish)">
      追加
    </button>
  </div>
</template>

<script>
  import Vue from 'vue'
  import List from './list.vue'


  export default{
    name: 'add',


    data:function(){
      return{
        lists:[
          {title:'長崎建設',
           date:'2018/1/10',
           start:'8時',
           finish:'17時',
          },
          {title:'石本建設',
           date:'2018/1/15',
           start:'9時',
           finish:'16時',
          },
        ],
        newPlanCostomer:'',
        newPlanDate:'',
        newPlanStart:'',
        newPlanFinish:'',
      }
    },

    methods:{

      connectCostomer: function(newC){
        this.newPlanCostomer = newC;
      },

      connectDate: function(newD){
        this.newPlanDate = newD;
      },

      connectStart: function(newS){
        this.newPlanStart = newS;
      },

      connectFinish: function(newF){
        this.newPlanFinish = newF;
      },

      addPlan: function(newCostomer,newDate,newStart,newFinish){
        list.lists.push({           //ここをどうにかすべきなんだろうけどわからない
          title: newCostomer,
          date: newDate,
          start: newStart,
          finish: newFinish
        });
        this.newPlanCostomer = '';
        this.newPlanDate = '';
        this.newPlanStart = '';
        this.newPlanFinish = '';
      },

    },
  }
</script>

各欄に入力された内容をエンターキーが押された時にそれぞれnewC,newDなどに入れて、追加ボタンを押すと、list.vueのdataのlistにpushしたい

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 1

checkベストアンサー

+1

Componentをまたいだデータのやり取りは

  1. Eventをemitして親に伝えて行く方法
  2. Vuexを使ってアプリケーション全体でデータの保持をする方法

の2種類が可能です。
結局アプリケーションを作っていくと1だと辛くなっていきます。
そのため、最初からVuexを使っていったほうがいいと思います。
https://vuex.vuejs.org/ja/intro.html

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2018/01/23 23:55

    回答ありがとうございます。
    vuexを導入しようと思って、https://zukucode.com/2017/04/vuejs-vuex.htmlを参考に、srcフォルダの下にstoreフォルダを作成し、エントリポイントであるsrc/main.jsでimport store from 'src/store';とインポートしようとしたのですが、Uncaught Error: Cannot find module "src/store"というエラーになりました。
    重ねて申し訳ないのですが、どうしたらstoreフォルダをインポートすることができるのか教えていただけませんか?
    コンパイルにはwebpackを用いています。

    キャンセル

  • 2018/01/24 18:36

    う〜んその状況だけで、ファイルの構成を見れないと正直答えづらいですね。
    このエラーでる場合は大抵、読込ファイルのパスの指定が間違っています。

    今おっしゃっている状況だけだと、store/index.jsなどのJSファイルが無いように書かれているのですが、storeにはindex.jsを入れているんですよね?
    それ以外は実際のディレクトリ構成が見えないと辛いですね…。
    でも、from "src/store"の書き方で参照できていないことがやっぱり原因になっていると思います

    キャンセル

  • 2018/01/24 22:28

    絶対パスの指定はできるようになってるはずなんで、指定はしっかりできているはずなんですけどねえ…。
    別で新しく質問してみようと思います。親切にありがとうございました。

    キャンセル

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

  • ただいまの回答率 90.76%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

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

  • JavaScript

    15333questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML

    8336questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • Vue.js

    585questions

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

  • Onsen UI

    314questions

    HTML5で記述されたモバイルアプリの高速化、およびネイティブアプリライクなUIが作れるフレームワーク。 様々なJavaScriptフレームワークと併せて使用することができます。スマートフォン向けアプリ、Webサイトに必要なアニメーション、UI/UXを実装することが可能になります。