¿Cómo puedo importar un componente de vue dentro de otro?

publicado por: Anonymous Estoy iniciando en Vue Js y me gustaría algo de orientación si es posible, quiero saber si es posible importar un componente dentro de otro, hasta donde eh visto si es posible, pero no logro hacerlo. Los pasos de instalación de Vue Js que realicé son los siguientes: # install vue-cli $…(Continue Reading)

vue.jsのv-forで要素が生成されたタイミングを感知したい。

投稿者: Anonymous ご覧いただきありがとうございます。 vue.jsでv-forでli要素を生成します。 生成が終わったらこの要素を取得し、何かしらのイベントを発火させたいと考えてます。 <ul class=”list”> <li v-for=”i in item” :key=”i.id”> <p> テスト </p> </li> </ul> v-forで仕様している配列は、 vueのmethodsの部分で生成しています。 methodsの部分で配列を生成してからv−forで中身を生成しています。 この生成したliをv-forが終了したタイミングで取得し、イベント発火させたいのですが、配列を生成してから、v-forが回るのでvueのどのタイミングで取得したら良いか、方法が見つかりません。 知見がある方がいらっしゃれば、助けていただけるとありがたいです。 分かりづらい文章で申し訳ないですが、よろしくお願いします。 解決 Vue.nextTick や vm.$nextTick() を使うことで描画後(DOM変化後)のタイミングでイベントは飛ばせるかと思いますがいかがでしょうか。 リアクティブの探求#非同期更新キュー _x000D_ _x000D_ new Vue({_x000D_ el: ‘#app’,_x000D_ data: {_x000D_ item: [],_x000D_ count: 0_x000D_ },_x000D_ methods: {_x000D_ onClick() {_x000D_ this.item.push(this.count++)_x000D_ console.log(‘before’, this.$el.innerHTML)_x000D_ this.$nextTick(() => console.log(‘after’, this.$el.innerHTML))_x000D_ }_x000D_ },_x000D_…(Continue Reading)

VueにおいてBootstrapTimepickerのデータ更新が取得できずバインディングできない

投稿者: Anonymous Vueを勉強し始めて2ヶ月程です。 BootstrapTimepickerを利用して単純なバインドを試しているのですが、 http://jdewit.github.io/bootstrap-timepicker/ Timepickerで更新される値がVueで更新を検知できずバインディングがされません。 カスタムイベント等も試してみたのですが、なぜか検知できず。 今はVue用に自前でTimePickerコンポーネントを作ることを考えていますが、 原因だけ知りたいという探究心から調査していますが全くわかりません。 よろしくお願いします。 _x000D_ _x000D_ var app = new Vue({_x000D_ el: ‘#app’,_x000D_ data:{_x000D_ time: “12:00 AM”_x000D_ }_x000D_ }); _x000D_ <link href=”https://cdnjs.cloudflare.com/ajax/libs/bootstrap-timepicker/0.5.2/css/bootstrap-timepicker.min.css” rel=”stylesheet”/>_x000D_ <link href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css” rel=”stylesheet”/>_x000D_ <script src=”https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js”></script>_x000D_ <script src=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js”></script>_x000D_ <script src=”https://cdnjs.cloudflare.com/ajax/libs/bootstrap-timepicker/0.5.2/js/bootstrap-timepicker.min.js”></script>_x000D_ <script type=”text/javascript” src=”//unpkg.com/vue”></script>_x000D_ <div id=”app”>_x000D_ <input v-model=”time” data-provide=”timepicker”>_x000D_ <div>_x000D_ {{ time }}_x000D_ </div>_x000D_ </div> _x000D_ _x000D_ _x000D_…(Continue Reading)

Diferencias entre computed properties y methods en VueJS

publicado por: user75901 Dentro de VueJS tenemos dos opciones para manipular los datos que están al alcance de nuestra instancia de VueJS: Computed properties Methods(functiones del modo en que ya las conocemos) EJEMPLO DE METHODS let app = new Vue({ el: ‘#app’, data:{ valor: 0 }, methods:{ aumenta(){ return console.log(this.valor) } }, created(){ this.aumenta() }…(Continue Reading)

Vue.js+VueRouterにおける画面上部への遷移方法(スクロール方法)についてご教授ください。

投稿者: user29383 Vue.js+VueRouterの画面制御についてです。 $router.pushを用いて画面の再描画を行っています。 ここでいう画面の再描画とは、マニュアルの「パラメーター変更の検知」に記載されている内容と似たような振る舞いです。 https://router.vuejs.org/ja/guide/essentials/dynamic-matching.html#%E3%83%91%E3%83%A9%E3%83%A1%E3%83%BC%E3%82%BF%E3%83%BC%E5%A4%89%E6%9B%B4%E3%81%AE%E6%A4%9C%E7%9F%A5 例をあげますと「更新画面にて、更新ボタン押下後に、更新内容で現在の画面を再描画する」といった振る舞いになります。 期待していた動作としては、スクロール後の画面下部でイベント発火した場合でも、$router.pushによる再描画により画面上部(トップ)で再描画されることでした。 ですが、実際に再描画した際の位置はイベント発火したスクロール後の画面下部となりました。 考えたところとしては、$router.pushを用いた方法では、マニュアルに記載されているように「同じコンポーネントインスタンスが再利用」されているため再描画のポジションが保持されてしまっているのではないか、と考えています。 また試した内容としては、vueのライフサイクル(moutedやupdatedなど)や、VueRouterのナビゲーションガード(beforeRouteUpdateやbeforeRouteEnterなど)にて、window.scrollTo(0,0)を試してみました。 ですが一瞬上部(トップ)で表示されたあと画面下部へ遷移してしまいました。 なんらかのデータで上書きされてしまっているように感じています。 つきましては、$router.pushによる現在の画面を再描画する際に画面上部(トップ)のポジションで再描画する方法についてご教授いただきたく思います。 解決 https://qiita.com/kuriya/items/f1f0a929e29bcba531ef こちらのサイトを参考に、beforeRouteUpdate内でsetTimeoutを仕掛けたところ、期待した振る舞いとなりました。 ひとまず解決といたします。ありがとうございました。 回答者: user29383

Vue.jsでaxiosを使い.envファイルにアクセストークンを置いてもブラウザのdevtoolからトークンがばれる

投稿者: Anonymous Vue.jsでhttp通信を行うために axiosを使い、使用するアクセストークンは.envファイルに置いているのですが ブラウザのdevtoolからトークンがばれるのはどうしようもないのでしょうか? 暗号化などを行う方法がありますか? 解決 Vue.jsをブラウザ上で動作させる場合、axiosでHTTPリクエストを行うのもブラウザです。そのため、必然的にブラウザがアクセストークンを知ることになるため、質問者さんのおっしゃる通り、どうしようもないです。 アクセストークンをブラウザ(クライアント側)に知られてはいけない場合、トークンを知っているAPIサーバーを用意し、クライアント(Vue.js)からはそのAPIサーバーに対してリクエストを発行、アクセストークンを用いた実際のリクエストはAPIサーバーが行うという方法をとることになります。 回答者: Anonymous

Javascript – Usar coma como separador de miles

publicado por: Anonymous He visto demasiados ejemplos, pero ninguno me ha convencido a lo que realmente quiero y la mejor práctica para realizar esto. Tengo mi código de la siguiente manera: const nf = new Intl.NumberFormat("es-MX"); let anualidad = 1200; this.model.enero = nf.format(anualidad); output: 1200 Mi problema es que no coloca la coma en 1,200;…(Continue Reading)

Vue.jsの子コンポーネントのpropsのテスト

投稿者: Anonymous Vue.jsのコンポーネントの単体テスト(Vue Test Utils)で、テストしているコンポーネントから子コンポーネントに、想定通りのpropsが渡っているかテストしたいのですが、どのように書けばいいでしょうか。 解決 @vue/test-utilsのmount (もしくはshallowMount) メソッドを用いてコンポーネントをマウントした場合、wrapper.find(Child).props(“prop”)のようにして子コンポーネントに渡されたpropsを取得することができます。 テスト全体は以下のようになるでしょう。 import { mount } from “@vue/test-utils”; import App from “./App.vue”; import Child from “./components/Child.vue”; const wrapper = mount(App); expect(wrapper.find(Child).props(“fuga”)).toEqual(“hoge”); codesandboxでの例を以下に示します。 https://codesandbox.io/s/get-child-component-props-tieh9 回答者: Anonymous

Mostrar una imagen por un pedido GET Ajax (axios) de vue js 2 y mostrarla por html 5

publicado por: Anonymous Este es mi codigo quiero hacer un llamado GET de axios por Vue.JS y que luego de tener la imagen, que la muestre en html getImage(param) { axios.get(param) .then((resp) => { return this.image = resp.data; }).catch((err)=>{ console.log(err) }); } html en realidad es el template de vue pero va dentro de un…(Continue Reading)

Vue.js カスタムフィルタでhtmlタグを含んだ文字を返したい

投稿者: Anonymous Vue.jsのカスタムフィルタを作成し、改行を<br>タグに変換したいのですが、どうやるのがいいでしょうか。 <p>{{text | nl2br}}</p> Vue.filter(‘nl2br’, value => value.replace(/n/g, ‘<br>’)); これだと “文字列<br>文字列” のように、エスケープされた文字が表示されます。 以下のように、text全てエスケープしない、というのはやりたくありません。 <p>{{{text | nl2br}}}</p> 解決 簡単にやるとすれば、filterを使わずに、そもそも改行させるようにcssを使ったほうが早いと思いますが、どうでしょうか? これならば、タグはエスケープされないと思いますが。 <style> p { white-space: pre; } </style> 回答者: Anonymous

Vueのクリックイベント時に式を実行させることがうまくいきません。

投稿者: Anonymous Vue.jsがうまくいきません の続き 前回の質問で教えていただいたことを参考に下記のように変更を行ったのですが、やはりうまくいきません。 <button @click=”change”> </button> var app = new Vue({ el: ‘#changeBtn2’, data: { headding: ‘当社のダミー商品1つめを紹介します。’, description1: ‘1. 当社のダミー商品1つめを紹介します。…’, description2: ‘2. 当社のダミー商品1つめを紹介します。…’ // show: false }, methods: { change: function() { headding: ‘当社のダミー商品2つめを紹介します。’, description1: ‘1. 当社のダミー商品2つめを紹介します。…’, description2: ‘2. 当社のダミー商品2つめを紹介します。…’ } } }) 追記 mjy さんの回答を元に書きなおしたのですが、やはりうまくいきません。 <button @click=”change”> </button> <p id=”description1″> {{ description1…(Continue Reading)

No setea el valor de un input con VueJs

publicado por: Anonymous Tengo un input text con typeahead que uso para buscar un usuario Esto lo hago mediante un componente de vue, el template es: <template> <div> <label for=””>Buscar Usuario</label> <input type=”text” class=”form-control search-user” required=”” placeholder=”Usuario” autocomplete=”off”/> <input type=”hidden” name=”id_user” required=”” v-model=”user”/> </div> </template> <script> export default { data() { return { user: ”…(Continue Reading)

vueが立ち上がってくれない

投稿者: Anonymous https://github.com/hands-lab/En-Gyo-Neo docker-compose build docker-compose up goとmysqlは立ち上がるのですがvueが立ち上がってくれません 参考にしたもの https://qiita.com/po3rin/items/c70105f684e6816621d2 https://qiita.com/yu-croco/items/0c0d5083298f7db9e1bb 解決 修正ポイントが2つありそうです。 1. docker-composeのvueにてcommandを指定していますが、Dockerfileの内容と被りますし、yarn installは不要だと思います。そもそもの行自体が不要で、これを消した上で下記の修正をDockerfileに適用したら動きました。 2. docker/client/Dockerfileにて、最後に CMD yarn serve を追記します。これで、shellで引数としてコマンドを指定しなくてもよくなります。 余談ですが、yarnはyarnだけでyarn installと同じ挙動になったはずです 🙂 回答者: Anonymous

Vue Router クエリパラから配列をcomponentのpropsに渡す方法

投稿者: Anonymous Vue Routerで、クエリパラメータから配列をcomponentのpropsに渡す方法を教えてください。 こちらのページで「URL /search?q=vue は {query: ‘vue’} をプロパティとして SearchUser コンポーネントに渡します。」という例はありました。 私が知りたいのは、「URL /search?q[]=10&q[]=20 は {query: [’10’,’20’]} をプロパティとして SearchUser コンポーネントに渡します。」といった場合の方法です。 よろしくお願いします。 解決 vue-routerのparseQueryオプションとstringifyQueryオプション及びquery-stringモジュールを用いることで実現可能です。 以下のブログ記事にやりたいことをそのまま実現できるサンプルコードがありましたので引用します。このように、VueRouterインスタンスを作成する部分でparseQueryオプションとstringifyQueryを指定します。これらのオプションは、クエリ文字列からオブジェクトへ、またその逆の変換を、自分で指定する関数によってカスタマイズできるものです。 vue-routerのデフォルトの処理では配列の記法に対応していませんので、query-stringモジュールの関数を用いることで配列の記法に対応させた処理を用意して差し替えています。query-stringモジュールの関数にarrayFormat: ‘bracket’というオプションを渡しているのがポイントです。 引用元: vue-router query stringで配列を扱う – とりあえずphpとか(動作しなそうな部分があったので少し修正しています) import queryString from ‘query-string’ var router = new VueRouter({ ・・・ parseQuery: (query) => { return queryString.parse(query, { arrayFormat: ‘bracket’ }) }, stringifyQuery: (params)…(Continue Reading)

Vue.jsのthis.$compileが即時反映されない

投稿者: Anonymous Vue.jsに関しての質問なのですが、 this.$compile が即時反映されないのですが、そういうものなのでしょうか? 参考URL: https://jsfiddle.net/orangelion/L5xs401d/6/ _x000D_ _x000D_ // https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js_x000D_ // https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.16/vue.min.js_x000D_ _x000D_ Vue.component(‘test-select-children’, {_x000D_ template: ‘#test-select-children-template’,_x000D_ _x000D_ data: function() {_x000D_ return {_x000D_ filterData1: [{id: 1}, {id: 4}, {id: 5}],_x000D_ filterData2: [{id: 5}],_x000D_ test1s: [{id: 1, name: ‘a’}, {id: 2, name: ‘b’}],_x000D_ test2s: [{id: 3, name: ‘c’}, {id: 4, name: ‘d’}],_x000D_ cloneElement: `_x000D_ <div…(Continue Reading)

外部JSライブラリをvue-cli 3で使うには

投稿者: Anonymous UMD(UniversalModelDefinition)で定義されている外部JSライブラリを、vue-cli 3で使うにはどうすれば良いでしょうか。 ライブラリは自分のリポジトリに置いて使います。 vue-cliを使うまでは、index.htmlからscriptタグで読み込んで使っていました。 解決 ライブラリは自分のリポジトリに置いて使います。 が何を指しているのか曖昧ですが、UMDということなので通常のよくあるライブラリ同様に使用できます。 自分の他のGitHubリポジトリ(または任意のgitリモートリポジトリ)に置いている npm install [git url] などでそのパッケージをプロジェクトに追加して使いたい箇所でimportする(またはrequire). import hoge from ‘example’; や import hoge from ‘example/lib/example’; など 使いたいプロジェクトの同じリポジトリ内に存在している そのままimportできます。 import hoge from ‘./lib/example’; など その他、当てはまらない場合などは追加情報をください。 回答者: Anonymous

‘Access-Control-Allow-Origin’ Error de CORS con vue.js

publicado por: Anonymous Estoy haciendo una petición de una API con axios desde vuejs, cuando consumí esta API desde el servidor me da una respuesta con status code, pero al intentar consumirla desde el componente vue me lanza un error: falta la cabecera CORS ‘Access-Control-Allow-Origin’ Este es el código: <template> <div id=”app”> <h1 class=”title”>Login</h1> <button…(Continue Reading)

Vue.jsを利用したTabulatorのrowSelectedイベントについて

投稿者: Anonymous 現在、Vue.jsを利用して、クライアント開発を行っております。 その中で、tabulatorを利用していますが、 tabulatorに用意されている「rowSelected」を利用しても、 methodsのtestメソッドが「test is not defined」になります。 <template> <div ref=”table”></div> </template> <script> export default { data () { return { tabulator: null, tableData: [], rowNo: { title: ‘No’, field: ‘rowNo’, align: ‘center’, formatter: ‘rownum’, headerSort: false, width: 30 } }, mounted () { this.tabulator = new this.$Tabulator(this.$refs.table, { data: this.tableData, columns: [ this.rowNo…(Continue Reading)

Vue 2 directiva :src no muestra imagen pero carga HTML

publicado por: Anonymous Estoy creando esta aplicación con Laravel 5.4 y Vue 2 y necesito mostrar una imagen si está o no presente. Para esto utilicé las directivas v-if y v-else. Para empezar éste es mi código JS: var vm = new Vue({ el: “#app”, data: { term: “”, category: “”, ads: [] }, mounted:…(Continue Reading)

Laravel Blade Templating + Vue2 HTML Render

publicado por: Anonymous Tengo una aplicación que utiliza Laravel 5.4 y a modo de realizar búsquedas de registros de modo reactivo con AJAX decidí utilizar Vue 2. El tema es que al renderizar la información de Vue.js me aparece el clásico y lógico error de Laravel, que no encuentra la constante: HTML: <div class=”container” id=”app”>…(Continue Reading)

Formatear fecha a español utilizando la libreria Moment js con Vue js

publicado por: Anonymous Estoy intentando formatear una fecha a español: Tengo definido un método que recibe la fecha y lo formatea. getDate : function (date) { return moment(date).format(‘MMMM Do YYYY, h:mm:ss a’); } Y en la vista lo llamo de esta forma: {{getDate(row.fecharegistro)}} El resultado es este: January 23rd 2019, 6:23:18 am Ya intente agregar…(Continue Reading)

Asignar DateTime a input type=datetime-local con :value

publicado por: Anonymous estoy intentando asignar a un input tipo datetime-local fechas que me devuelve el servidor pero no asigna, he intentado con :value, v-bind y v-model, tambien formateando la fecha con moment.js pero sigo sin conseguir nada. este es mi codigo: cronograma.vue template <div class=”table-responsive”> <table class=”table align-items-center table-flush”> <thead class=”thead-light”> <tr> <th>#</th> <th…(Continue Reading)

Mostrar imágenes en VueJs y Laravel

publicado por: Anonymous Hola deseo cargar imágenes con VueJs en Laravel pero no puedo de la siguiente forma. Dato.image contiene el nombre de la imagen <img src=”/images/{{Dato.image}}” class=”img-responsive” height=”70″ width=”90″> solución Para poder añadir código JavaScript al atributo src deberá bindear haciendo uso de los dos puntos : antes del atributo y como se trata…(Continue Reading)

文字列を返すメソッドで値がない場合、 null / undefined / 空文字列のいずれを返すべきか

投稿者: Anonymous 以下の例で null, undefined, 空文字列のいずれを返す実装が適切でしょうか。 vuexのstoreのgetter内です。 const getters = { partnerMst: (state) => (!state.partner_mst ? [] : state.partner_mst), publicGroupMst: (state) => { return !state.public_group_mst ? [] : state.public_group_mst }, getPartnerRecordByCode: (getters) => (codeId) => { const targetMst = getters.partnerMst() return !targetMst ? {} : targetMst.find((item) => item.partner_company_id === codeId) }, getPartnerNameByCode: (getters) => (codeId)…(Continue Reading)

Vuejsがうまくいきません。

投稿者: Anonymous Vueのクリックイベント時に式を実行させることがうまくいきません。 の続き 教えていただいた情報をもとに下記のようにしたのですが二つ目だけうまくいって一つ目がうまくいきません。もしかして一つのvueに二つ入れてはいけないのでしょうか? また、 this.headdingのthisはの子要素であるv-text=”headding”の中に指定のテキストを入れるという意味でよいでしょうか‌​? var app = new Vue({ el: ‘#vueHook1’, data: { headding: ‘当社のダミー商品1つめを紹介します。’, description1: ‘1. 当社のダミー商品1つめを紹介します。…’, description2: ‘2. 当社のダミー商品1つめを紹介します。…’, }, methods: { change: function() { this.headding = ‘当社のダミー商品2つめを紹介します。’; this.description1 = ‘1. 当社のダミー商品2つめを紹介します。…’; this.description2 = ‘2. 当社のダミー商品2つめを紹介します。…’; } }, el: ‘#vueHook2’, data: { headding: ‘当社のダミー商品1つめを紹介します。’, description1: ‘1. 当社のダミー商品1つめを紹介します。…’, description2: ‘2. 当社のダミー商品1つめを紹介します。…’,…(Continue Reading)

¿Como mostrar datos con Vue-resource en Tabla Boostrap Vue?

publicado por: Anonymous Quiero mostrar solo algunos datos del siguiente json: https://randomuser.me/api/?results=10 En una tabla Boostrap-Vue se supone que tengo que exportar los datos pero no se muestra. Mi código es el siguiente y solo quiero mostrar ciertos datos como el nombre y apellido. <template lang=”html”> <div> <b-table striped hover :personas=”personas” :fields=”fields”></b-table> </div> </template> <script>…(Continue Reading)

Vuex Nuxt.js アクション内でstateが取得できない

投稿者: Anonymous アクション内でストアに格納されているstateを取得したいのですが、state名を指定すると、画像のような空の状態で取得できません。 何が原因で取得できないのでしょうか? store/blog.js export const state = () => { return { blogs: [], // ブログ記事一覧を格納 } } export const actions = { getBlog (state, paylaod) { console.log(state) // 取得できている console.log(state.blogs) // 取得できない } } 解決 Actionの第一引数はミューデータのようなstateではなくcontextではないでしょうか。 getBlog ({ state }, paylaod) { のように取り出せば期待されてる挙動は実現できるかと思われます。(アクションなので実際にはcommit等も使うでしょうが。) 回答者: Anonymous

Search Filter en vuejs

publicado por: Anonymous Cuando utilizo el buscador, no me toma en cuenta la primera letra a menos que la ponga en mayúscula, estoy utilizando vue.js, vue-cli webpack Con el siguiente código hago funcionar el search: computed: { filteredPacks: function(){ return this.packs.filter((pack) => { return pack.name.match(this.search); }) } }, Con este input hago la busqueda: <input…(Continue Reading)

Filtrar varios parámetros en un input con vue js

publicado por: Anonymous estoy empezando con vue js, tengo un tabla que muestra los datos de un json, y un buscador que filtra los resultados. El problema es que solo consigo que filtre a partir de un valor (item.noticia_titulo_cas), alguien sabe como podría filtrar el resultado desde cualquier valor del objeto js? Muchas gracias. Aquí…(Continue Reading)