タグ付けされた質問 「vue.js」

Vue.jsは、徐々に採用できるようにすることを目的としたユーザーインターフェイスを構築するためのオープンソースのプログレッシブJavascriptフレームワークです。Vue.jsは主にフロントエンド開発に使用され、中間レベルのHTMLおよびCSSが必要です。Vue.jsバージョン固有の質問は、[vuejs2]または[vuejs3]でタグ付けする必要があります。

6
属性内の補間を解決する方法は削除されました。vバインドまたはコロンの省略形を使用しますか?Vue.JS 2
私のvueコンポーネントは次のとおりです: <template> <div> <div class="panel-group" v-for="item in list"> ... <div class="panel-body"> <a role="button" data-toggle="collapse" href="#purchase-{{ item.id }}" class="pull-right" aria-expanded="false" aria-controls="collapseOne"> Show </a> </div> <div id="purchase-{{ item.id }}" class="table-responsive panel-collapse collapse" role="tabpanel"> ... </div> </div> </div> </template> <script> export default { ... computed: { list: function() { return this.$store.state.transaction.list }, ... …

7
vue.jsのコンポーネントにデータを渡す
vue.jsのコンポーネント間でデータを渡す方法を理解するのに苦労しています。ドキュメントを数回読み、vueに関連する多くの質問やチュートリアルを確認しましたが、まだ理解できていません。 これに頭を悩ませるために、私は非常に単純な例を完成させる助けを望んでいます 1つのコンポーネントにユーザーのリストを表示する(完了) リンクがクリックされた(完了した)ときに、ユーザーデータを新しいコンポーネントに送信します-下部の更新を参照してください。 ユーザーデータを編集して、元のコンポーネントに送り返します(ここまで取得していません) これがステップ2で失敗するフィドルです:https://jsfiddle.net/retrogradeMT/d1a8hps0/ 新しいコンポーネントにデータを渡すために小道具を使用する必要があることは理解していますが、機能的にそれを行う方法がわかりません。データを新しいコンポーネントにバインドするにはどうすればよいですか? HTML: <div id="page-content"> <router-view></router-view> </div> <template id="userBlock" > <ul> <li v-for="user in users">{{user.name}} - <a v-link="{ path: '/new' }"> Show new component</a> </li> </ul> </template> <template id="newtemp" :name ="{{user.name}}"> <form> <label>Name: </label><input v-model="name"> <input type="submit" value="Submit"> </form> </template> 主要コンポーネントのjs: Vue.component('app-page', { template: '#userBlock', …

5
vuejsでコンポーネントの初期データをリセットする適切な方法はありますか?
特定の開始データのセットを持つコンポーネントがあります。 data: function (){ return { modalBodyDisplay: 'getUserInput', // possible values: 'getUserInput', 'confirmGeocodedValue' submitButtonText: 'Lookup', // possible values 'Lookup', 'Yes' addressToConfirm: null, bestViewedByTheseBounds: null, location:{ name: null, address: null, position: null } } これはモーダルウィンドウのデータなので、表示されたらこのデータから始めたいと思います。ユーザーがウィンドウからキャンセルした場合、すべてのデータをこれにリセットしたいと思います。 データをリセットするメソッドを作成して、すべてのデータプロパティを手動で元に戻すことができることはわかっています。 reset: function (){ this.modalBodyDisplay = 'getUserInput'; this.submitButtonText = 'Lookup'; this.addressToConfirm = null; this.bestViewedByTheseBounds = null; …

4
VuejsとVue.set()、配列を更新
私はVuejsを初めて使用します。何かを作ったが、それが簡単で正しい方法かどうかはわからない。 私が欲しいもの 配列にいくつかの日付が必要で、イベントでそれらを更新します。最初にVue.setを試しましたが、うまくいきませんでした。配列アイテムを変更した後: this.items[index] = val; this.items.push(); 配列に何もプッシュ()しないと更新されます。しかし、最後の項目が非表示になることがあります。どういうわけか...このソリューションは少しハックだと思います。どうすれば安定させることができますか? 簡単なコードはここにあります: new Vue({ el: '#app', data: { f: 'DD-MM-YYYY', items: [ "10-03-2017", "12-03-2017" ] }, methods: { cha: function(index, item, what, count) { console.log(item + " index > " + index); val = moment(this.items[index], this.f).add(count, what).format(this.f); this.items[index] = val; this.items.push(); console.log("arr length: …

3
vue.js webpackプロジェクトでfavicon.icoを適切に設定する方法は?
をvue webpack使用してプロジェクトを作成しましたvue-cli。 vue init webpack myproject そして、プロジェクトをdevモードで実行しました: npm run dev 私はこのエラーを受け取りました: リソースの読み込みに失敗しました:サーバーはステータス404(見つかりません)http:// localhost:8080 / favicon.icoで応答しました では、webpack内で、favicon.ico正しくインポートする方法は?

5
v-modelが変更されたときにイベントを発生させる方法は?
私はでfoo()関数を@click起動しようとしていますが、ご覧のとおり、イベントを正しく起動するには、ラジオボタンを2回押す必要があります。2回目に押すだけで値をキャッチします... (srStatus)が変更された@clickときにイベントを発生させるだけでなく、イベントを発生させたいv-model。 ここに私のフィドルがあります: http://fiddle.jshell.net/wanxe/vsa46bw8/

9
Vue.jsの不明なカスタム要素
私はVue.jsの初心者で、日常のタスクに対応するアプリを作成しようとしていますが、Vueコンポーネントに遭遇しました。以下は私が試したものですが、残念ながら、このエラーが発生します。 vue.js:1023 [Vue警告]:不明なカスタム要素:-コンポーネントを正しく登録しましたか?再帰コンポーネントの場合は、必ず「名前」オプションを指定してください。 何かアイデア、助けてください? new Vue({ el : '#app', data : { tasks : [ { name : "task 1", completed : false}, { name : "task 2", completed : false}, { name : "task 3", completed : true} ] }, methods : { }, computed : { }, ready …


8
Vueコンポーネントで通貨をフォーマットするにはどうすればよいですか?
私のVueコンポーネントは次のようなものです: <template> <div> <div class="panel-group"v-for="item in list"> <div class="col-md-8"> <small> Total: <b>{{ item.total }}</b> </small> </div> </div> </div> </template> <script> export default { ... computed: { list: function() { return this.$store.state.transaction.list }, ... } } </script> 結果{{ item.total }}は 26000000 しかし、私はそれをこのようにフォーマットしたい: 26.000.000,00 jqueryまたはjavascriptで、私はそれを行うことができます しかし、vueコンポーネントでそれを行う方法は?

6
Vue.js:サービスを定義する
私はAngularの代わりとしてVue.jsを見ていますが、これまでのところ本当に気に入っています。その感覚をつかむために、私は既存のAngularプロジェクトをVueプロジェクトにリファクタリングしています。私はRESTAPIと通信する必要があるところです。 Angularでは、そのためのサービスを定義していました。それは、それを必要とするすべてのコントローラーに注入されました。私が理解しているように、Vueは「サービス」構造を知らないようです。これはVueでどのように達成できますか? 私は考えましたがvue-resource、私が理解している限り、それはhttp機能のためだけです。私もjQueryを使用しているので、これは廃止されました。 例: 私は持っvueComponent1ていvueComponent2ます。どちらも同じRESTリソースにアクセスする必要があります。これを処理するには、両方のコンポーネントがRESTリソースへの要求に使用できる中央サービスが必要です。Angularには「サービス」コンポーネントがあり、まさにそれを実行します。Vueはしていません。

4
。$ mount()とelの違い[Vue JS]
このコードの違いは何ですか: new Vue({ data () { return { text: 'Hello, World' }; } }).$mount('#app') そしてこれ: new Vue({ el: '#app', data () { return { text: 'Hello, World' }; } }) .$mount()代わりに、elまたはその逆を使用することの利点は何ですか?
83 vue.js  vuejs2 

4
vue-cliでモジュール './src/data'が見つかりません
vue-cli 4.1.1でプロジェクトを作成し、yarn serveを実行した後、次のエラーが発生しました Error: [BABEL] C:\dev\vuestudy\src\main.js: Cannot find module './src/data' (While processing: "C:\\dev\\vuestudy\\node_modules\\@vue\\cli-plugin-babel\\preset.js") これに関するヒントはありますか? 前もって感謝します。 更新: KoushaとDaveは正解です。core-jsパッケージのアップデートを待った後、新しいプロジェクトを作成しました。
18 vue.js  babel 

4
Sassローダーエラー:APIスキーマに一致しない無効なオプションオブジェクト
フレームワークVuetifyJS(v2.0.19)でVueJSを使用しています。npm run serveを実行した後、このエラーが発生します: Sass Loaderは、APIスキーマと一致しないオプションオブジェクトを使用して初期化されました。 私が試したこと:node_modulesフォルダーを削除し、すべてのnpmパッケージとnode.jsを最新の安定したバージョンに再インストール/更新しました。 完全なエラーメッセージ: error in ./node_modules/vuetify/src/components/VRangeSlider/VRangeSlider.sass Module build failed (from ./node_modules/sass-loader/dist/cjs.js): ValidationError: Invalid options object. Sass Loader has been initialised using an options object that does not match the API schema. - options has an unknown property 'indentedSyntax'. These properties are valid: object { implementation?, sassOptions?, …

3
Vueプロジェクトのpromise.finallyがEdgeで機能しないのはなぜですか?
Edgeでポリフィルを機能させるのに非常に苦労しています。私はすべてがうまくいかない様々な試みでドキュメントを追おうとしました。それはpromise.finally具体的には機能していないようです。これはvuexモジュールで発生するため、vue.configの transpileDependenciesにvuexを追加しようとしましたが、うまくいきませんでした。 私のbabel.config.js: module.exports = { presets: [['@vue/cli-plugin-babel/preset', { useBuiltIns: 'entry', }]], }; 私のmain.jsでは、最上部に次の2つのインポートがあります。 import 'core-js/stable'; import 'regenerator-runtime/runtime'; 私のvue.config.js // eslint-disable-next-line import/no-extraneous-dependencies const webpack = require('webpack'); const isProd = process.env.NODE_ENV === 'production'; module.exports = { configureWebpack: { // Set up all the aliases we use in our app. plugins: [ …

3
サードパーティのライブラリを使用してVueJSで要素を印刷する
私はHTMLテーブルに取り組んでいてhtml-to-paper、vue.js を使用してそのテーブルをプリンターに印刷しています。私がしていることは、追加をクリックして新しい行を作成し、クリックして印刷することです私はテーブルを印刷しようとしていますが、空のセルのみを表示するデータ コードApp.vue <template> <div id="app"> <button type="button" @click="btnOnClick">Add</button> <div id="printMe"> <table class="table table-striped table-hover table-bordered mainTable" id="Table"> <thead> <tr> <th class="itemName">Item Name</th> <th>Quantity</th> <th>Selling Price</th> <th>Amount</th> </tr> </thead> <tbody> <tr v-for="(tableData, k) in tableDatas" :key="k"> <td> <input class="form-control" readonly v-model="tableData.itemname" /> </td> <td> <input class="form-control text-right" type="text" min="0" step=".01" …

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.