I'm migrating from Vue.js v1 to v2. Before i was assigning vue delimiters in vue.config, but in version 2 it doesn't work (in components I mean). So how to globally declare delimiters?
There is a migration guide on the VueJS documentation : https://v2.vuejs.org/v2/guide/migration.html
You can find information about delimiters (the options has been replaced) : https://v2.vuejs.org/v2/guide/migration.html#Vue-config-delimiters-replaced
You need to declare delimiters in your vue component :
new Vue({
delimiters: ['${', '}']
})
Related
I am doing migration from vue2 to vue3 and I need to remove $set as required.
So for example, in my application my code is like this in vue2:
this.$set(..., ..., null);
So to delete it should I use additional package like tiny-emitter and apply it like this?
emitter.set(..., ..., null);
How can I remove $set from my application for vue3?
You don't need vue Set anymore because reactivity is now work fine in Vue3.
So to replace this.$set for an array you can juste do that:
// Old vue2 -> this.$set(array, index, null);
this.array[index] = null
So in each use you have, you just need to do the basic JS you need, and do not care about reactivity issue :).
here is my code, options array updated in created hook based on api response and response of api is array of object and v-model value is also updated in created hook. this selector is of input type and also filter the data based on input type from options array.
hope so this chunk of code is enough to explain.
<q-select
ref="registeredCountry"
for="registeredCountry"
color="olab-brand-blue"
v-model="registeredAddress.country"
use-input
fill-input
hide-selected
:options="countryOptions"
#filter="filterCountryList"
emit-value
option-label="countryName"
option-value="countryName"
#update:model-value="resetStateAndCityFields('registeredAddress')"
map-options
>
</q-select>
I got exactly the same Vue warning with one of my q-selects, after migrating it (unchanged) from Vue 2/Quasar 1 to Vue 3/Quasar 2. The same q-select code worked without warnings on the older levels. The warning is very unspecific from a Quasar point of view.
However, I found a hint on https://github.com/quasarframework/quasar/issues/8898 to eliminate this warning, which helped to resolve the issue in my case.
The reason for the warning was in my case due to the use of q-chips with q-items for the options in the q-select. Those q-items for the q-select options used "v-on='scope.itemEvents'", together with "v-bind='scope.itemProps'", which was the recommended combination in Quasar 1/Vue 2.
In Quasar 2/Vue 3 the "v-on='scope.itemEvents' is no longer necessary (if used, it causes this Vue warning). Just search for all "v-on='scope.itemEvents'" in your template code, then drop (i.e. delete) those "v-on=...", but keep the "v-bind=...".
This eliminates the above Vue warnings (which otherwise come up for every selectable option in your q-select).
in Vue 2 I can assign a prototype in main.js for example via Vue.prototype.$AppName in Vue 3 I can assign a prototype to for example app.config.globalProperties.appName but how can I get the prototype value in a component. I can't use this.appName like in Vue 2 because of the proxy
I am creating a web page using Nuxt.js. (Static file built with the
nuxt generate command)
As a requirement,I need to write the original tag in the static file
that I built. The original tag is for displaying the data obtained
on the server side. Writing an original tag in a vue file naturally
gives an error.
For example, in the image below,
Is there a way to ignore original tags in the vue file?
vue file(example)
// disabled-next-line
{{^ server-side-display-data}}
<button> button </ button>
// disabled-next-line
{{/ server-side-display-data}}
Build file(example)
{{^ server-side-display-data}}
<button> button </ button>
{{/ server-side-display-data}}
Tried
It seemed possible to ignore certain "files" like below, but I haven't found a way to ignore certain "tags"
https://ja.nuxtjs.org/api/configuration-ignore/
Please help
I had the same issue and was looking for a solution... you can try with this solution i've used.
in your nuxt.config.js
...
vue: {
config: {
ignoredElements: [string or regexp],
},
},
...
see this documentation for more details
I'm trying to apply the Bootstrap theme to my datatable. I'm using ngx-datatable version 10.4.0 because I'm still on Angular 4 and 11.0 isn't compatible. According to the changelog, the Bootstrap theme was added in version 10.3.0.
Below is my component.html:
<div>
<ngx-datatable class="bootstrap" [rows]="rows" [columns]="columns" (select)='onSelect($event)' [selected]="selected" [selectionType]="'single'"
[limit]="10" [columnMode]="'force'" [headerHeight]="40" [footerHeight]="40" [rowHeight]="'auto'">
</ngx-datatable>
</div>
However, this doesn't add the styling as in the demo. I think I have included everything the documentation shows.
I'm using Bootstrap 3.3.7. Is 4.0 required? Am I not including something correctly?
Make sure you are including the scss file to your build.
In .angular-cli.json you should add it:
"apps": [
{
...
"styles": [
...
"../node_modules/#swimlane/ngx-datatable/release/themes/bootstrap.css",
...
],
also the <ngx-datatable> element should have both bootstrap and ngx-datatable classes:
<ngx-datatable class="bootstrap ngx-datatable">