常連

Vue-cliで開発する学習をしているのですが、ローカルサーバーが起動しなくなりました。
以下に試したことを記載します。
解決策をご存知の方、アドバイスいただけると幸いです。

## 試したこと
```bash
yarn serve
yarn run v1.15.2
$ vue-cli-service serve
 INFO  Starting development server...
 98% after emitting CopyPlugin 
```
上記のyarnコマンドでyarnを起動しようとすると以下のエラーが表示されます。

### エラー表示
```bash
 ERROR  Failed to compile with 1 errors                                                                       23:05:27

This dependency was not found:

* core-js/modules/es6.function.name in ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/
lib!./node_modules/vuetify-loader/lib/loader.js!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-l
oader/lib??vue-loader-options!./src/App.vue?vue&type=script&lang=js&

To install it, you can run: npm install --save core-js/modules/es6.function.name
^C
MacBook-Pro:practice_vue_firebase user$ npm install --save core-js/modules/es6.function.name
npm ERR! code ENOLOCAL
npm ERR! Could not install from "core-js/modules/es6.function.name" as it does not contain a package.json file.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/user/.npm/_logs/2019-04-17T14_05_46_073Z-debug.log

```

npmをインストールしてくださいと表示されているので記載の「npm install --save」コマンドを実行すると、そんなファイルはないよ、みたいなエラーが表示されます。

### そのほか
・nodemoduleとpackage.jsonを一度消してみて再実行もやってみましたが事象は解決されずでした。

Vue,jsのローカルサーバーがThis dependency was not found表示で起動できない

現在以下のサイトを参考にツイート投稿アプリケーションを作成していますが、formで送信すると以下のエラーが表示されます。
前回に質問した403エラーは表示されなくなりましたが次は422エラーが表示されます。formバリデーションが問題なのでしょうか。laravel,vueが初心者なので、アドバイス宜しくお願い致します。

参考サイト( Vue.js + Vue Router + Vuex とサーバーサイドに Laravel を使用したシングルページ Web アプリケーションの開発)[リンク内容](https://www.hypertextcandy.com/vue-laravel-tutorial-submit-photo-part-2#%E9%80%A3%E8%BC%89%E8%A8%98%E4%BA%8B%EF%BC%88%E5%85%A816%E5%9B%9E%EF%BC%89)



###エラーメッセージ
```
POST http://localhost:8000/api/tweets 422 (Unprocessable Entity)

[Vue warn]: Error in v-on handler (Promise/async): "Error: Request failed with status code 422"

found in

---> <TweetForm> at resources/js/components/TweetForm.vue
       <Navbar> at resources/js/components/Navbar.vue
         <App> at resources/js/App.vue
           <Root>


Error: Request failed with status code 422
```

###api.php
```
<?php

use Illuminate\Http\Request;

/*
|--------------------------------------------------------------------------
| API Routes
|--------------------------------------------------------------------------
|
| Here is where you can register API routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| is assigned the "api" middleware group. Enjoy building your API!
|
*/

// 会員登録
Route::post('/register', 'Auth\RegisterController@register')->name('register');
// ログイン
Route::post('/login', 'Auth\LoginController@login')->name('login');
// ログアウト
Route::post('/logout', 'Auth\LoginController@logout')->name('logout');
// ログインユーザー
Route::get('/user', function () {
    return Auth::user();
})->name('user');

// tweet投稿
Route::post('/tweets', 'TweetController@create')->name('tweet.create');
```

###TweetController.php
```
<?php

namespace App\Http\Controllers;

use App\Http\Requests\StoreTweet;
use App\Tweet;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Auth;
use Illuminate\Support\Facades\DB;
use Illuminate\Support\Facades\Storage;

class TweetController extends Controller
{
    public function __construct()
    {
        // 認証が必要
        $this->middleware('auth');
    }
    /**
     * tweet投稿
     * @param StoreTweet $request
     * @return \Illuminate\Http\Response
     */
    public function create(StoreTweet $request)
    {

        $tweet = new Tweet();
        $tweet->user_id = Auth::user()->id;
        $tweet->text = $request->get('text');


        Auth::user()->tweets()->save($tweet);

        // return redirect()->route('tweets.index', [
        //     'id' => $tweet->id,
        // ]);

        // リソースの新規作成なので
        // レスポンスコードは201(CREATED)を返却する
        return response($tweet, 201);
    }
}
```

###TweetForm.vue
```
<template>
  <nav v-show="value" class="panel panel-default tweet-form">
    <div class="panel-body">
      <div v-show="loading" class="panel">
        <Loader>Sending your tweet...</Loader>
      </div>
      <form v-show="! loading" class="form" @submit.prevent="create">
        <div class="form-group">
          <textarea class="form__item form-control" rows="5" v-model="text"></textarea>
        </div>
        <p>{{ text }}</p>
        <div class="text-right">
          <button type="submit" class="btn btn-primary">ツイート</button>
        </div>
      </form>
    </div>
  </nav>
</template>

<script>
import Loader from './Loader.vue'

export default {
  components: {
    Loader
  },
  props: {
    value: {
      type: Boolean,
      required: true
    }
  },
  data () {
    return {
      loading: false,
      text: '',
    }
  },
  methods: {
    async create () {
      // ローディング表示
      this.loading = true

      const response = await axios.post('/api/tweets', this.text)
      this.reset()
      this.$emit('textarea', false)

      // ローディングを非表示
      this.loading = false

      this.$router.push(`/tweets/${response.data.id}`)
    } 
  }
}
</script>
```

###User.php
```
/**
     * リレーションシップ - tweetsテーブル
     * @return \Illuminate\Database\Eloquent\Relations\HasMany
     */
    public function tweets()
    {
        return $this->hasMany('App\Tweet');
    }
```

###StoreTweet.php
```
<?php

namespace App\Http\Requests;

use Illuminate\Foundation\Http\FormRequest;

class StoreTweet extends FormRequest
{
    /**
     * Determine if the user is authorized to make this request.
     *
     * @return bool
     */
    public function authorize()
    {
        return true;
    }

    /**
     * Get the validation rules that apply to the request.
     *
     * @return array
     */
    public function rules()
    {
        return [
            'text' => 'required'
        ];
    }
}
```

###resources/js/store/auth.js
```
const state = {
  user: null
}

const getters = {
  check: state => !! state.user,
  username: state => state.user ? state.user.name : ''
}

const mutations = {
  setUser (state, user) {
    state.user = user
  }
}

const actions = {
  async register (context, data) {
    const response = await axios.post('/api/register', data)
    context.commit('setUser', response.data)
  },
  async login (context, data) {
    const response = await axios.post('/api/login', data)
    context.commit('setUser', response.data)
  },
  async logout (context) {
    const response = await axios.post('/api/logout')
    context.commit('setUser', null)
  },
  async currentUser (context) {
    const response = await axios.get('/api/user')
    const user = response.data || null
    context.commit('setUser', user)
  }
}

export default {
  namespaced: true,
  state,
  getters,
  mutations,
  actions
}
```

Laravel+vueでpostを行なった場合に422エラーが発生する

vuexのstore側にaxiosでapiのレスポンスを返すメソッドを作成しコンポーネント側で前述のメソッドを使用しレスポンスデータを受け取る事を目的としていますがうまくいきません。

```javascript
//store.js
...
actions: {
  returnAPI() {
    axios.get('hogehuga').then((response) => {
      return response
    })
  }
}

```

```javascript
//コンポーネント側
data() {
  return {
    ApiData: ''
  }
},
created() {
　//Promiseが返るがメソッド側と同じように.then()では取れない？
  console.log(this.createAPI())
},
methods: {
  ...mapActions([
    'returnAPI'
  ])
},
```
コンポーエント側でメソッドを呼んだところPromiseが返ってきているようですがメソッド側と同じように.then()ではレスポンスデータを取得できない？です。
こちらはどのようにすればうまく取得できるのでしょうか？お手数ですがご教授いただけると幸いです。

axiosでレスポンスを返すメソッドを作成したがコンポーネント側でうまく使用できない

### 聞きたいこと
下のようにtemplate内で三項演算子を使用して、表示されるアイコンを切り替えたいと思っています。

```
<template>
  <div>
    {{ emotion ? <smile-icon /> : <bad-icon /> }}
  </div>
</template>

<script lang="ts">
import { defineComponent, SetupContext, computed } from '@vue/composition-api';

export default defineComponent({
  components: {
    SmileIcon: () =>
      import('@/assets/icons/smile.svg?inline'),
    BadIcon: () => import('@/assets/icons/bad.svg?inline'),
  },
  props: {
    emotion: {
      type: Boolean,
      required: true,
    },
  },
});
</script>
```

ただ、`expression expected` といったエラーが表示されてしまいます。

### 参考にしたコード
https://github.com/vuejs/vue-hackernews-2.0/blob/98399b55c6f1da4197840ba76189795b3e95be0f/src/components/Comment.vue#L9-L14

上のように三項演算子に右辺に文字列を指定すると問題なく動作するのですが、コンポーネントを指定したいと思っています。

[Vue]template内で三項演算子を使用して表示するコンポーネントを変更したい

いつも大変お世話になっております。
久しぶりにVue CLIを用いて簡単なシミュレーションアプリを作成しているのですが、
APIで取得したデータをhtml上に展開するところでハマってしまっています。

例えば、

```
const plan = {
  "id": 805,
  "date": "2021-02-20T23:49:22",
  "date_gmt": "2021-02-20T14:49:22",
  "title": {
    "rendered": "タイトルタイトルタイトルタイトル"
  }
}  
```

というデータがあった際に、`{{ plan.title.rendered }}` でタイトルが出力されると思うのですが、
なぜか 下記２つのエラーが出てしまいます。

`Uncaught TypeError: Cannot read property 'rendered' of undefined` 

```
[Vue warn]: Unhandled error during execution of render function 
  at <Plan> 
  at <Simulation>
```
#####

ちなみに、`{{ plan.title }}` では、ちゃんと`"rendered": "タイトルタイトルタイトルタイトル"`と出力されます。

深い階層になった途端にエラーが発生してしまうのでなんでだろう？とはてな状態です。

どなたか詳しい方がいらっしゃれば、ご教授いただけますと幸いです。

それではどうぞ宜しくお願い致します。


###環境
% vue --version
@vue/cli 5.0.0-beta.2

### ソースコード
```javascript
// store/index.js

import { createStore } from 'vuex'
import axios from 'axios'

export default createStore({
	
	state : {
		plan : ""
	},
	
	getters : {
		plan : (state) => state.plan,
	},
	
	mutations : {
		setPlan : (state, { plan }) => {
			state.plan = plan
		}
	},
	
	actions : {
		
		async fetchPlan({ commit }, { id }){
			
			const url = `https://localhost:8890/wp-json/wp/v2/posts/${id}/`;
			
			const planRowData = await axios.get(url)
			const plan = planRowData.data
			
			if( !plan.id ) throw new Error('Invalid Post.')
			
			commit('setPlan', { plan })
			
		}
		
	}
	
})
```
```
// App.vue

<template>
  <div id="simulation" class="simulation">

    <section>

      <Plan/>

    </section>

  </div>
</template>

<script>
import Plan from './components/Plan'

export default {

  name : 'Simulation',

  components : {
    Plan
  }

}
</script>
```
```

// Plan.vue
<template>
  <div>
   
    {{ plan.title.rendered }}
    // Uncaught TypeError: Cannot read property 'rendered' of undefined 発生！

  </div>
</template>

<script>
import { mapGetters, mapActions } from "vuex";

export default {

  name : 'Plan',

  created(){
    this.fetchPlan({ id : 805 });
  },

  computed : {
    ...mapGetters([ 'plan' ])
  },

  methods : {
    ...mapActions([ 'fetchPlan' ])
  }

}
</script>
```

Vueの初歩的な質問になります。

ざっくりした質問になってしまいますが、もしどなたかご回答いただけると助かります。
vuetifyのv-data-tableを使ってデータテーブルを作りました。それにトグルUIによってカラムの表示、非表示を実装したいです。

![デモUI](e9408fedbfb4778c1b63a9711126bb65.png)

↑こんな感じのUIです。

vuetifyのプロパティにはなさそうだったので、v-showで実装しようとしてもheaderにv-showの定義ができず、うまくいきません。
実装のサンプルとかもしどなたかご存知でしたらご教示いただけると大変幸いです。

よろしくおねがいします。

vuetifyのv-data-tableによる列ごとの表示、非表示の実装

### 聞きたいこと
Vueを使用してWebアプリ開発をしています。
下のようにコンポーネントを作成しているのですが、propsの値によって特定のCSSクラスにスタイルを動的に割り当てたいと思っています。

```
<template>
  <p class="text">Hello</p>
</template>

:

<script>
props: {
  color: {
     type: String,
     default: 'red'.
  }
}
:
</script>

<style>
.text {
  color: 'red';  // もしprops.colorがblueだった場合、このredをblueにしたい
}
</style>
```

## 注意
v-bind:styleを使用してCSSクラスのcolorを直接変更しなくてもcolorは変更できそうですが、できれば既存で定義されたCSSクラスの値を動的に変更したいです。

[Vue]特定のCSSクラスのスタイルを動的に修正する方法

# 前提

「vuex state値をmounted内で使いたい」とタイトルをつけさせていただきましたが、
下記に紹介するソース・目的とするゴールが本当にvue.jsの規定に沿っているのか自体が不安と考えております、合わせてご意見をいただけましたら今後のわたくしの勉強にもなると思います、お手数ではございますがよろしくお願いいたします。

##ソース

####store/posts.js(vuexのソース)
```js
export const state = () => ({
    postsCategories: null
})

export const getters = {
    postsCategories: state => state.postsCategories
}

export const mutations = {
    setPostsCategories(state, postsCategories) {
        state.postsCategories = postsCategories
    }

}

export const actions = {
    async addPostsCategory({ commit }, payload) {
        const newCat = {}
        newCat[payload.slug] = payload
        //console.log(newCat)
        await this.$axios.$patch('/postscategory.json', newCat)
        const postsCategories = await this.$axios.$get('/postscategory.json')
        //const postsCategories = await this.$axios.$get('/postscategory/' + payload.id + '.json')
        commit('setPostsCategories', postsCategories)
    },
    async postsCategories({ commit }) {
        const postsCategories = await this.$axios.$get('/postscategory.json')
        commit('setPostsCategories', postsCategories)
    },

}
```

####テンプレートファイルの記述
```html
<template>
  <section class="container posts-page">
      <multiselect :selected="selected" :options="options" :multiple="true" @update="updateSelected" v-model="payload.categories" placeholder="カテゴリー選択"></multiselect >
 
        <ul>
          <li v-for="(cat,index) in postsCategories" :key="index">{{ cat.name }}</li>
        </ul>
  </section>
</template>

<script>
import { mapGetters } from "vuex";
import Multiselect from "vue-multiselect";
export default {
  components: { Multiselect },
  data() {
    return {
      selected: null,
      options:[]
    };
  },
  methods: {
    updateSelected(newSelected) {
      this.selected = newSelected;
    }
  },
  mounted() {
    const cat = this.$store.state.posts.postsCategories;
    console.log(cat);
    for (var value in cat) {
      this.options.push(value);
    }
  },
  created() {
    this.$store.dispatch("posts/postsCategories");
  },
  computed: {
    ...mapGetters("posts", ["postsCategories"])
  }
};
</script>
```

## 出来ていること

- 目的とするページに遷移をするとcreatedが作動、store/post.jsのpostsCategoriesという名のstateに格納しております。値はオブジェクトとして格納しております。
- computedのmapGettersでpostsCategoriesを getter関数として取得し、htmlにレンダリング可能です。

#実現したいこと
- multiselectという子コンポーネントにprops要素としてoptionsを設けております。渡す値をpostsCategoriesの"name"を基にした配列を入れたい。
- postsCategoriesはオブジェクトであるので配列に変換しなければならない。
- postsCategoriesの中身はこんな感じである 　`{ "nuxt": { "name": "Nuxt.js", "slug": "nuxt" }, "laravel": { "name": "Laravel", "slug": "laravel" }, "wp": { "name": "wordPress", "slug": "wp" }}`
- mapGettersでgetterとして、postsCategoriesは取得しております、このpostsCategoriesをsetter関数として使うことはできるのか。


##試したこと
mountedにセットしようとしてみましたが、値はセットされませんでした。
```
  mounted() {
    const cat = this.$store.state.posts.postsCategories;
    console.log(cat);
    for (var value in cat) {
      this.options.push(value);
    }
  },
```
上記の経験から、store.state値をどのようにsetterとして使えばよいのか、悩みだしました。
そもそもの考え方が違うのではないのかとも悩み始めております。

vue.js,vuexに詳しい方がいらっしゃいましたら、是非とも教えていただきたいです。
よろしくお願いいたします。