Class Binding ternary operator
You have unnecessary braces. The latter expression is an object whereas the first is simply a ternary expression that returns a string. :class=”sportTypes.sports.indexOf(sport) > -1 ? ‘is-primary’ : ‘is-outlined'”
vue.js
vue reload child component
Use a :key for the component and reset the key. See https://michaelnthiessen.com/force-re-render/
Vuetify v-select onchange event returns previously selected value instead of current
You don’t need to specify the data because that’s what, I’m guessing, the change event passes by default. So change: v-on:change=”changeRoute(`${select.src}`)” to just v-on:change=”changeRoute” and in the function call: changeRoute(a) { this.$router.push({path: a.src }) console.log(a) }
Does Vue.js have a built in way to add a copy of a persistent object to a repeated array
See this issue on GitHub. Shallow Clone I was using jQuery’s $.extend until Evan You pointed out there is an undocumented built it extend function Vue.util.extend that does a shallow clone. So what you could use is: addItem: function(e) { e.preventDefault(); this.items.push(Vue.util.extend({}, this.newItem)); } See the updated Fiddle. Deep Clone When doing a shallow clone … Read more
Cannot use v-for on stateful component root element because it renders multiple elements?
Your template has to have one root element. It’s just one rule you cannot break. Since you’re making a table, it would make sense to make tbody the root element. var Users = { template: ` <tbody> <tr v-for=”list in UsersData”> <th>{{ list.idx }}</th> <td>{{ list.id }}</td> </tr> </tbody> `, data: function () { return … Read more
VueJS – Prevent Default on link click but also capture object
Alternatively, in Vue 1.x, you could also use the event modifier .prevent: HTML: <a v-on:click.prevent=”showResponder(responder)”>…</a> You could stop propagation as well: <a v-on:click.prevent.stop=”showResponder(responder)”>…</a> JS: … showResponder: function(responder) { // No need to prevent any more this.activeResponder = responder; } …
Handle Bootstrap modal hide event in Vue JS
Bootstrap uses JQuery to trigger the custom event hidden.bs.modal so it is not easily caught by Vue (which I believe uses native events under the hood). Since you have to have JQuery on a the page to use Bootstrap’s native modal, just use JQuery to catch it. Assuming you add a ref=”vuemodal” to your Bootstrap … Read more
Displaying button when hovering over div in TailwindCSS
Add this to your tailwind.config.js file variants: { extend: { display: [“group-hover”], }, }, And then add group to your parent div and hidden and group-hover:block to your child element that you want to appear on hover of the parent. <div class=”group”> <button class=”hidden group-hover:block”>Child</button> </div>
“document is not defined” in Nuxt.js
It’s a common error when you start a Nuxt project 😉 The Choices.js lib is available only for client-side! So Nuxt tried to renderer from server-side, but from Node.js window.document doesn’t exist, then you have an error. nb: window.document is only available from the browser renderer. Since Nuxt 1.0.0 RC7, you can use <no-ssr> element … Read more
Vue. How to get a value of a “key” attribute in created element
you don’t need to use an extra attribute. You can get the key by this.$vnode.key