mustache in vue not work - vue.js

I created a component and used it with vue-router. However, when I update the webpage it told me that "the data 'sss' is not defined."enter image description here
and this is my component:
enter image description here
I am sure that I have already define the data. so what's wrong?

It looks like you just have a type, it's data not deta
Also for future reference please copy and paste your code, don't post screen shots otherwise we will have to type everything out if your question requires an answer with the code.

Related

Vue-good-table set global search value programmatically

I have 2 questions,
How can I set the value of the global search box and trigger the filter programmatically, using java script (basically I want to implement a persistent filter, based on the last user input, as the user navigates in and out of the page), check image below
Considering the Veu devtool component, I can find the vue-good-table Component and its Search subcomponent. And I can see that there is a value propuerty on this subcomponent that has the same value I had typed in the search box.
So my question is if with this information can I have a way to solve my first question, does the information in the Vue devtool can help me figure out the references to that object and value and then set it?
This could be a very useful tool in case I have a similar problem in the future with another component.
Have very little experience with Veu and general searches on how to access data or elements in components has been confusing, I just understand the properties and events to pass data, but in this case this is an imported component, so I can not hack it.
Thanks #tao, I read the docs before but skipped noticing this property
externalQuery
This is the one that solves the problem, you can link a variable to the search item and I then use your own text input box to implement the solution.

how can I add component elements as dynamic component into child component in vue3

I want to make data grid component in vue3
But the problem is, for different type of data, I need to add different type of action buttons.
Please see the image bellow, I have described in the photo, what I want.
Please advice me.
Codes zip link given below:
Click here to get code

Gridsome workflow pages names & props

I submitted a question to the github for gridsome but haven't had a reply yet so wanted to re-post here.
Please keep in mind that this is specific to GRIDSOME framework for vue js
Github question: https://github.com/gridsome/gridsome.org/issues/542
Question
HI Guys,
I've been playing around with Gridsome and have come to a fork in the road which from the Docs I have not found a solid / clear answer - maybe its implied, but not stated (or possibly I am being an idiot - this is also common)
Girdsome page names:
Can you set a page name to a page in gridsome?
i.e.
Why is this needed:
On the user clicking a component I use this.$router.push(name: X, props: { X: X}) to change the page
I pass an object as a prop to the new page
I did try to use the pages PATH instead of the name but it was unable to pass the prop when doing so
I can add the name manually to the routers.js file in the .temp folder - however if I add a new page - this is then wiped
Am I not using gridsome as it should have been intended? is there a way to add a name to a route?
Passing data to different pages
The above question has seemed from me needing to pass an object with data to different pages as a prop - but gridsome used GraphQL so is it intended that you use GraphQL on each page to get the data for that page and instead should not pass variables?
Any help on clarifying this would be great -
Thanks in advance -
W

How to update slider values?

I'd like to update valuemax value on a slider that people can only choose a value from 1 to 3, not to 5 like it is now. I have 'inspect the element' on the page, and got something like this:
<div dojoattachpoint="sliderHandle,focusNode" class="dijitSliderImageHandle dijitSliderImageHandleH" dojoattachevent="onmousedown:_onHandleClick" wairole="slider" valuemin="1" valuemax="5" role="slider" aria-valuenow="3" tabindex="0" aria-labelledby="years_label" aria-valuemin="1" aria-valuemax="5" style="position: absolute;"></div>
I'm trying to find file/place on where that value can be updated in the code, however I'm not able to figure it out.
Assuming you have access to the source code for this application, change the javascript code that creates this slider widget.
You're looking at the DOM for the page in your example. You can use the minimum and maximum properties, which translates to some of the values you see in the DOM. See the Dojo dijit/form/Slider documentation (takes you to 1.6 since it looks like you're using an older version of dojo because of the use of dojoattachpoint, those names changed in later versions of Dojo).
If you're not sure what class or widget this is in the source, look for the id element further up in the dom. Often that will have the package and class name as part of the id. Looking at the developer tools to see what files were loaded on the networking tab might give you a clue, if the application hasn't gone through any customer build or packaging to optimize it.

How can I access child component data from a parent in Vue?

I am trying to access data from a single-file component in Vue, but can't find any way of doing it. I have tried using $emit, but can't get thath to work either. The data string has to be blank as it gets modified by an input field.
I have seen others' solutions here on SO, but either the don't fit with my problem or I can't get them to work. I want to try to keep it as simple and understandable as possible.
You can use the special attribute ref:
<child-comp ref="child"></child-comp>
In JS:
vm.$refs.child.YOUR_DATA
Hope this helps!