This code works well. But if I change the code, it doesn't work.
I'd like anyone to help me if they has experience in Vue.js.
It does work, it should be used like this {{colorList[0]}} not {{this.colorList[0]}}since vue template is using the “Mustache” syntax.
Related
We are using Vuejs in our project, but I'm trying to implement HTMX in our view and I have no clue how. I know that I probably can't use HTMX in Vuejs and I can't change our whole project to HTMX right now.
I was thinking to use v-html and generate whole HTMX there but it doesn't work because when I import import 'htmx.org'; based on HTMX doc, vue just hates it :D
Edit: While writing this question, we decided to do it as an separated project but I am curious anyway. Is is even possible? There is not much questions about HTMX yet, I didn't find anything helpful.
I am happy to answer any question for clarification.
Thanks and sorry for my potato english!
I tried to implement HTMX in our VueJs project for separated page or component and it didn't work.
we are trying to use Dexie with Vue. We are loading some table data into the Vue component and we would like to sort it by clicking on the column. We are having problems with changing sort order in livequery. We found a solution for an Angular (https://dexie.org/docs/Tutorial/React#6-pass-some-query-params) but we can't find the same for Vue. Can you please send some light into this case?
Thank you.
Have a situation in which there are two different components, that have templates in which there are 'this' used. Removing all 'this' from templates right now, but saw this situation and got curios why it is happening like this.
In this case it throws error:
<a :href="`${this.$locale() ? "Yes" : "No}`">
In this case it works:
<title :lang="this.$locale()">
These are just examples, but is there a reason that one works and other throws error? Couldn't find any information on this in Vue documentation. Could this be because of ternary operation?
First of all, to be clear for the people reading this, you shouldn't use this inside Vue SFC templates.
To anwser, that's because of how Vue compiles your template and its properties. I'm not an expert on Vue internal mecanics so please take what I say with caution.
:lang="this.$locale() Here, it could be that Vue removes the this reference at build time.
:href="`${this.$locale() ? "Yes" : "No}`" Here you're using a string interpolation, which is evaluated at runtime. Vue has no way to remove the this safely, because it could be refering to something else than the component instance. So this just stays as is in the final bundle and breaks at runtime.
This is just my guess from my understanding of Vue. I think only a Vue maintainer / contributor could anwser this properly.
I'm using both Vue.js and HAML in my current project. The templates are parsed by HAML, converted into HTML, then parsed by Vue. For instance:
#pagecontent.nonscrolling
%h2 Demand forecasts
%label{ for:"location-type" } Select location type
%select.form-control#location-type{ v-model:"locationType" }
%option{ v-bind:value:"'foo'" } Foo
It works ok, but it's a bit disconcerting worrying whether all the Vue syntax will make it unscathed through the HAML parser.
But I really like this type of succinct, angle-bracket-less template.
Is there is a cleaner way to achieve this? Some add-on to Vue that supports something similar?
Don't worry to much. There is nothing wrong about using preprocessors. I mean vue depends on wepback where everything is being preprocessed in one way or an other. Out of the box you can use pug with vue so I put more trust in it. It works fine for me without any unexpected problems. Both have the nesting through indentation in common and this is something that starts to be confusing with longer source codes. So I use pug mainly in short components and nest them using named slots into bigger ones.
Your code - pug version (as far I can guess what this HAML code should do)
<template lang="pug">
#pagecontent.nonscrolling
h2 Demand forecasts
label(for="location-type") Select location type
select.form-control#location-type(v-model="locationType")
option(v-bind:value="foo") Foo
</template>
The whole Vuetifyjs website is made with pug:
Vuetifyjs.com Source Code
i try to do my first steps with vue.js.
My Question is:
Is there a possibility for the use of code completion if i dont wat to use the cli.
Therefore i have no .vue-Files.
I just use vue by binding the script (vue.js) over the < script>-tag to my html code.
I created a new javaScript-File (myVue.js) and also include it per script-tag in my html.
Vue itself is working correctly!
My problem is that the plugins i found so far (for sublime etc.) are not working with the .js-files.
Is there a way to use code completion and (correct) syntaxhighlighting in .js-files?
Thanks for having me.