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

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

新規登録して質問してみよう
ただいま回答率
87.20%
Vue.js

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

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

受付中

Laravel Vue3 での星評価コンポーネントの表示

ha_nu_ro
ha_nu_ro

総合スコア0

Vue.js

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

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

0回答

0評価

0クリップ

226閲覧

投稿2021/05/31 06:23

Laravelのレビューページを作成していて、星評価の部分をVue.jsのvue-star-ratingで実装したいです。
https://github.com/craigh411/vue-star-rating

初めてVueを触ったのでどこが違うのか検討がつきません。
コンポーネントファイルを作ってそこにコードを移したり、順番を変えてみましたが、
どれだけコードをいじっても星の表示ができません。
JSのコードを変えるたびにnpm run dev をしています。

コンポーネントファイルを作り、テンプレートを作成してそれをBladeで呼び出せたのでVueが使えることは確認できました。

関連するコードです。

resources/js/app.js

JavaScriot

import StarRating from 'vue-star-rating'; Vue.component('star-rating', StarRating); const app = Vue.createApp({ methods: { setRating(rating){ this.rating= rating; } }, data: { rating: 0 } }) app.component('star-rating', VueStarRating.default) app.mount('#app')

welcome.blade.php

PHP

<div id="app"> <h1>Vue Star Rating for Vue 3.x</h1> <star-rating @update:rating ="setRating"></star-rating> <star-rating v-model:rating="rating"></star-rating> <h2>Default</h2> <star-rating></star-rating> <h2>Half Stars</h2> <star-rating :increment="0.5"></star-rating> <h2>Red Stars</h2> <star-rating active-color="#9c0000"></star-rating> </div> <script src="js/app.js"></script> </body>

webpack.mix.js

JavaScript

const mix = require('laravel-mix'); if (mix.inProduction()) { mix.version(); } mix.js('resources/js/app.js', 'public/js') .sass('resources/sass/app.scss', 'public/css') .vue();

package.json

json

{ "private": true, "scripts": { "dev": "npm run development", "development": "mix", "watch": "mix watch", "watch-poll": "mix watch -- --watch-options-poll=1000", "hot": "mix watch --hot", "prod": "npm run production", "production": "mix --production" }, "devDependencies": { "@tailwindcss/forms": "^0.2.1", "@tailwindcss/typography": "^0.3.0", "@vue/compiler-sfc": "^3.0.11", "alpinejs": "^2.7.3", "axios": "^0.21", "laravel-mix": "^6.0.6", "lodash": "^4.17.19", "postcss": "^8.1.14", "postcss-import": "^12.0.1", "resolve-url-loader": "^3.1.3", "sass": "^1.34.0", "sass-loader": "^10.2.0", "tailwindcss": "^2.0.1", "vue": "^3.0.11", "vue-loader": "^16.2.0" }, "dependencies": { "vue-star-rating": "^2.1.0" } }

Laravel8
Vue3.0.11を使用しています。

良い質問の評価を上げる

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

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

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

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

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

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

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

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

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

まだ回答がついていません

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

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

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

Vue.js

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

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。