link1096 link1097 link1098 link1099 link1100 link1101 link1102 link1103 link1104 link1105 link1106 link1107 link1108 link1109 link1110 link1111 link1112 link1113 link1114 link1115 link1116 link1117 link1118 link1119 link1120 link1121 link1122 link1123 link1124 link1125 link1126 link1127 link1128 link1129 link1130 link1131 link1132 link1133 link1134 link1135 link1136 link1137 link1138 link1139 link1140 link1141 link1142 link1143 link1144 link1145 link1146 link1147 link1148 link1149 link1150 link1151 link1152 link1153 link1154 link1155 link1156 link1157 link1158 link1159 link1160 link1161 link1162 link1163 link1164 link1165 link1166 link1167 link1168 link1169 link1170 link1171 link1172 link1173 link1174 link1175 link1176 link1177 link1178 link1179 link1180 link1181 link1182 link1183 link1184 link1185 link1186 link1187 link1188 link1189 link1190 link1191 link1192 link1193 link1194 link1195 link1196 link1197 link1198 link1199 link1200 link1201 link1202 link1203 link1204 link1205 link1206 link1207 link1208 link1209 link1210 link1211 link1212 link1213 link1214 link1215 link1216 link1217 link1218 link1219 link1220 link1221 link1222 link1223 link1224 link1225 link1226 link1227 link1228 link1229 link1230 link1231 link1232

[Vue.js] bind click event to child component using v-bind Subscribe to RSS

I created a simple Minesweeper game and when it comes to the decision, which cell to render there are three possibilities:

Unrevealed cell
Revealed mine cell
Revealed neutral cell

I created a row component that renders all the cells contained by the row.

<template>
<div>

<component
v-for=”(cell, columnIndex) in row”
:key=”columnIndex”
v-bind=”getCellProps(cell, columnIndex)”
:is=”getComponentCell(cell)”
/>

</div>
</template>

<script>
// imports here

export default {
components: {
UnrevealedCell,
RevealedNeutralCell,
RevealedMineCell
},
props: {
row: Array,
rowIndex: Number
},
methods: {
getCellProps: function(cell, columnIndex) {
if(cell.revealed) {
if (cell.isMine) {
return {};
} else {
return {
mineNeighbours: cell.mineNeighbours
};
}
} else {
return {
unrevealedCell: cell,
x: columnIndex,
y: this.rowIndex,
cellClicked: this.onCellClicked
};
}
},
getComponentCell: function(cell) {
if(cell.revealed) {
if (cell.isMine) {
return RevealedMineCell;
} else {
return RevealedNeutralCell;
}
} else {
return UnrevealedCell;
}
},
onCellClicked: function(x, y) {
debugger;
}
}
}
</script>

Unfortunately my cellClicked event is not working. The child component is able to emit the event correctly but my onCellClicked doesn’t get executed. I think this is because I can’t write

cellClicked: this.onCellClicked

as it would normally be

@cellClicked

Without the @ the attribute might get added as a component property. How can I fix this to listen to the emitted cellClicked event?

Solution :

A few thoughts occur.

Firstly, the reason this isn’t working is because v-bind is used to set component props and element attributes. The @ prefix is a shorthand for v-on, so it isn’t a prop or attribute in this sense, it’s a directive in its own right. v-on does support an object version, just like v-bind, so you can do something like v-on=”getCellEvents(cell, columnIndex)” and return a suitable object for each cell type. This is probably the cleanest direct answer to the original question. Less clean and less direct answers are also available…

You could implement this by making cellClicked a prop of the child cell and then calling it as a callback function rather than emitting an event. Not saying you should, but you could. That would work with the code you posted above completely unchanged.

Another alternative is just to add the event listener for all cells. Include @cellClicked=”onCellCicked” in the template without worrying about the cell type. If the other cell types don’t emit that event then nothing will happen. vue.js doesn’t know what events a component can fire, you can listen for anything.

Further thoughts…

the cell template is a bit anaemic. I know people generally advise keeping logic out of the template but in the case I’d say you’ve probably taken it too far and it just makes things harder to understand. There are two ways you could address this:

Rewrite the component to use a render function instead. Templates exist because humans find them easier to read than render functions but in the case you’ve got all the logic in JavaScript anyway. The template isn’t really adding anything and going all-in with a render function would probably be easier to understand than what you have currently.
Move the logic into the template. I don’t see any obvious reason not to do it that way from the code you’ve posted. I’ll post an example at the end.

Either of these two approaches would remove the problem you had adding an event listener.

A final thought on the click events is that you could use event propagation to handle them instead. Add a single click listener on a suitable element of the surrounding component and don’t listen for events on the cells/rows at all. The single listener could then establish which cell was clicked (potentially fiddly) and whether anything needs to be done about it. While this would increase the coupling between the components I would imagine that it wouldn’t really matter as these components aren’t really reusable elsewhere anyway. I’m not recommending this as an approach at this stage but it is worth keeping in mind whenever you find yourself creating large numbers of repetitive components that all need the same events. In the scenario it would probably only make sense if you start to run into performance problems, and even then there will likely be better ways to fix such problems.

So, I promised an example of the template approach:

<template>
<div>
<template v-for=”(cell, columnIndex) in row”>
<unrevealed-cell
v-if=”!cell.revealed”
:key=”columnIndex”
:unrevealed-cell=”cell”
:x=”columnIndex”
:y=”rowIndex”
@cellClicked=”onCellClicked”
/>
<revealed-mine-cell
v-else-if=”cell.mine”
/>
<revealed-neutral-cell
v-else
:mineNeighbours=”cell.mineNeighbours”
/>
</template>
</div>
</template>

I’m not sure why the UnrevealedCell needs the x and y but if it’s just so that it can emit them as part of the event then you might want to consider registering the listener as @cellClicked=”onCellClicked(columnIndex, rowIndex)” and then there’s no need to emit the co-ordinates from the cell. I also wonder whether you need 3 separate components for these cells. My gut reaction is that one component would be more appropriate with the row component not needing to have any understanding of the individual cells at all.

[Vue.js] How to create the split 1/2 login screen in vue such that one side contains fields and the other side is image?

https://vuestic.epicmax.co/#/auth/login
something which looks as if in above link.

Solution :

As you’re using Vuetify you can use the container, layout and flex columns to create that:

<v-container>
<v-layout row wrap>
<!– xs12 and sm12 to make it responsive = 12 columns on mobile and 6 columns from medium to XL layouts –>
<v-flex xs12 sm12 md6>
<!– Login form here –>
</v-flex>
<v-flex xs12 sm12 md6>
<!– artwork here –>
</v-flex>
</v-layout>
</v-container>

Check more details about how to use the grid system here: https://vuetifyjs.com/en/framework/grid

[Vue.js] How to make Vue material select box showing option when the default value is empty?

when using the vuematerial for material design framework under vue.js.

For normal HTML, let say there is a selection box like this:

<select>
<option value=””>You should initially see this</option>
<option value=”1”>One</option>
<option value=”2”>Two</option>
</select>

When you run the script, initially you should see a selection box with the
text “You should initially see this”

However, when when using vuematerial to do something similar:

<template>
<div>
<div class=”md-layout md-gutter”>
<div class=”md-layout-item”>
<md-field>
<md-select v-model=”movie” name=”movie” id=”movie”>
<md-option value=””>Default film</md-option>
<md-option value=”fight-club”>Fight Club</md-option>
<md-option value=”godfather”>Godfather</md-option>
<md-option value=”godfather-ii”>Godfather II</md-option>
<md-option value=”godfather-iii”>Godfather III</md-option>
<md-option value=”godfellas”>Godfellas</md-option>
<md-option value=”pulp-fiction”>Pulp Fiction</md-option>
<md-option value=”scarface”>Scarface</md-option>
</md-select>
</md-field>
</div>
</div>
</div>
</template>

<script>
export default {
name: ‘BasicSelect’,
data: () => ({
movie: ‘’,
})
}
</script>

Demo link

I would expect seeing an select box with “Default film” chosen, instead of a blank select box. I noticed that by setting the value of the first option box to be something other then an empty string (e.g. -1) solves the problem, but for my actual case I need the default value to be empty string, so this workaround is not applicable to me. With that in mind, is there a way I can make the value to be shown initially?

Solution :

That’s not how it works with vue-mdc.
According to the docs on https://stasson.github.io/vue-mdc-adapter/#/component/select
you need to set the label prop of md-select to display a default

[Vue.js] How to fire vue lifecycle-events for every instance of a component?

there is a vue-component consisting of multiple instances of the same child-component. Some of these child-components are displayed under condition only. My problem is, that when the if-condition turns to false, both the destroyed-methods as well as the beforeDestroy-methods are only called once (for the last child-component which is to be destroyed) but not for every of the mounted child components. Is there any way to change this behaviour and achieve that the destroyed-method is called for every destroyed instance?

I created a fiddle for better understanding: When switching from “Precondition 1” to “Precondition 2 “ I would expect that the destroy-method for both, “instance 1” as well as “instance 2” gets fired. But the console shows only conducting the method for instance 2.
When switching back to “Precondition 1” there is no destroy-event bubbling up at all, but I would expect it to be called for instance 3.

Here is the fiddle:
https://jsfiddle.net/5chq02zs/2/

I also tried changing “destroyed” with “beforeDestroy” or “deactivated”, but the outcome remains the same. Can anyone point me in the right direction? Thank you.

Solution :

Add key=”id” to elements.

<my-component v-if=”picked == ‘true’” id=”1” :key=”1”>
instance 1
</my-component>
<my-component v-if=”picked == ‘true’” id=”2” :key=”2”>
instance 2
</my-component>
<my-component v-if=”picked == ‘false’” id=”3” :key=”3”>
instance 3
</my-component>

[Vue.js] How to use Cloud Foundry to serve Spring Boot web app with Vue front end and H2 database?

there is followed a tutorial using vue.js as front end and using spring boot as backend. I write the front end and put the built files from Vue’s dist folder to spring boot web’s src\main\resources\static folder.

The tutorial told me to use axios to transfer data to the backend. It’s configuration is as follows:

var axios = require(‘axios’)
axios.defaults.baseURL = ‘http://localhost:8090/api'

It works good on my local pc. But to put it and make it run on cloud.
I build the jar with mvn clean install. Then uploaded it to IBM’s cloud foundry.
The frontend works. However, it does not talk to the backend. The browser’s console log shows:

XHR failed loading: OPTIONS “<URL>”.
4xhr.js:178 OPTIONS http://localhost:8090/api/login net::ERR_CONNECTION_REFUSED

The demo is uploaded to https://github.com/clouddemo1/vuemduidemo1

I also want to include H2 database, but I tried and it only works on mem mode or file mode. The jdbc:h2:tcp://localhost/~/test mode does not work on the cloud.
So how to make it run on the cloud? Is there anyother way to make vue.js talk with the java backend without axios?
Or if it’s must, can I configure cloud foundry to make the link work?
Or if cloud foundry can’t do this, (I use cloud foundry just because it’s easy , just upload the jar, no need to configure), can k8s do this?

Solution :

XHR failed loading: OPTIONS “”.
4xhr.js:178 OPTIONS http://localhost:8090/api/login net::ERR_CONNECTION_REFUSED

This is failing because the app is no longer running on the local machine, it’s running on Cloud Foundry. You need to update the axios.defaults.baseURL setting to reference the route that you bound to the app.

You could hard code this in the config, which is not great but does work, or you could reference the VCAP_APPLICATION environment variable which is set by Cloud Foundry and contains information about the app, including the bound routes (there can be more than one). You could read this, pick a route and dynamically configure the app.

Ex:

“VCAP_APPLICATION”: {
“application_id”: “<guid>”,
“application_name”: “<app-name>”,
“application_uris”: [
“app-name.apps.example.com”,
“some-other-route.example.com”
],
“application_version”: “df82308c-7add-4f2b-bb44-a58680084a79”,
“cf_api”: “https://api.system.example.com",
“limits”: {
“disk”: 1024,
“fds”: 16384,
“mem”: 64
},
“name”: “<app-name>”,
“space_id”: “<space-guid>”,
“space_name”: “<space-name>”,
“uris”: [
“app-name.apps.example.com”,
“some-other-route.example.com”
],
“users”: null,
“version”: “df82308c-7add-4f2b-bb44-a58680084a79”
}

I also want to include H2 database, but I tried and it only works on mem mode or file mode. The jdbc:h2:tcp://localhost/~/test mode does not work on the cloud.

I don’t see why this technically wouldn’t work, so long as you’re app is talking to the database over localhost, all the traffic would be inside the app container. You’d have to be more specific about what exactly is failing.

That said, I don’t think you’d want to use H2 like that, at least not beyond a small test/demo. First off, the app containers are ephemeral, so none of the data would survive a restart/crash/restage/push or anything that triggers the container to restart (platform maintenance can do this too, so it’s not just actions you initiate). Second, you really wouldn’t be able to scale the app beyond one instance because each instance of the app would have it’s own copy of the database, which is going to be problematic.

What you really want to do is create a service & bind that to the app. Then, just like VCAP_APPLICTION, you can pull the service credentials from VCAP_SERVICES and dynamically configure the app to connect to the database. See the second part of this answer for details on how to do that: https://stackoverflow.com/a/56257656/1585136

Try running cf marketplace to see a list of the services the provider offers. Many services even have free tier service plans, so you can try them or use them for small apps and demos.

Hope that helps!

[Vue.js] Vue JS dynamic components in routes. Handling loading and error

In my vue.js application, when importing the components dynamically which are then being used in the routes. So when you go to a specific route, the component chunk will be fetched dynamically.

Sometimes it takes time to fetch the components and sometimes due to network error the component couldn’t be fetched. So to understand how can I handle the error and loading state gracefully.

Solution :

If you’re using axios to handle the requests there is the possibility to intercept any request and handle them for example according to there status.

Here’s an example which redirects to Login if response return error code is 401 (unauthorized).
One thing to mention is that you can have interceptors for responses and requests.

Documentation: https://github.com/axios/axios

axios.interceptors.response.use(response => {
return response;
}, error => {
if (error.response.status === 401) {
router.push(‘/logout’);
}

return error;
});

Solution 2:

vue.js allows you to define the component as a factory function that asynchronously resolves the component definition. This is called an async component factory.

Usually when we lazy load our router views with Webpack we do:

export default [
{
path: ‘/‘,
name: ‘home’,
component: () => import(‘@views/home’),
// ^^^^^^^^^^^^^^^^^^^^^
// The `import` function returns a Promise with our component definition.
},
] // RouteConfig[]

But, what happens when we need to handle the loading state?

Since vue.js 2.3.0 and vue.js Router 2.4.0, the async component factory can also return an object:

export default [
{
path: ‘/‘,
name: ‘home’,
component: () => ({
// The component to load (should be a Promise)
component: import(‘./MyComponent.vue’),
// A component to use while the async component is loading
loading: LoadingComponent,
// A component to use if the load fails
error: ErrorComponent,
// Delay before showing the loading component. Default: 200ms.
delay: 200,
// The error component will be displayed if a timeout is
// provided and exceeded. Default: Infinity.
timeout: 3000
})
},
] // RouteConfig[]

You may want to reuse the same loading and error components for different views, along with some delay and timeout defaults. If that is the case, you can use a strategy found in this vue.js enterprise boilerplate created by Chris Fritz, a vue.js core team member.

// Lazy-loads view components, but with better UX. A loading view
// will be used if the component takes a while to load, falling
// back to a timeout view in case the page fails to load. You can
// use this component to lazy-load a route with:
//
// component: () => lazyLoadView(import(‘@views/my-view’))
//
// NOTE: Components loaded with this strategy DO NOT have access
// to in-component guards, such as beforeRouteEnter,
// beforeRouteUpdate, and beforeRouteLeave. You must either use
// route-level guards instead or lazy-load the component directly:
//
// component: () => import(‘@views/my-view’)
//
function lazyLoadView(AsyncView) {
const AsyncHandler = () => ({
component: AsyncView,
// A component to use while the component is loading.
loading: require(‘@views/_loading’).default,
// Delay before showing the loading component.
// Default: 200 (milliseconds).
delay: 400,
// A fallback component in case the timeout is exceeded
// when loading the component.
error: require(‘@views/_timeout’).default,
// Time before giving up trying to load the component.
// Default: Infinity (milliseconds).
timeout: 10000,
})

return Promise.resolve({
functional: true,
render(h, { data, children }) {
// Transparently pass any props or children
// to the view component.
return h(AsyncHandler, data, children)
},
})
}

And use it like so:

export default [
{
path: ‘/‘,
name: ‘home’,
component: () => lazyLoadView(import(‘@views/home’)),
},
] // RouteConfig[]

[Vue.js] Data part of Response is a long script instead of desired json object

when building a web app using laravel and vuejs. there is made a axios get request to get a list of users .
when getting a Promise object, and from what there is read. Reason for getting a promise object is because it’s an async request.

there is tried .then() to get data part of the response. But when getting a huge script instead of desired data.

axios……then(function(response){
console.log(response.data);
})

Initially what i did was

var res = axios.get(‘/allUsers’);
console.log(res)

That time i came to know about promise object and read about.
When i checked network in dev tools, status code is 200 and i can see list of users. So i guess my request is successfully completed.

What should be done to get the list of the users. That list i will be using to update my UI.

Solution :

Depending on what you’re getting back for data there are a few ways to handle this. You may need to convert the data after the you get receive the response.

axios.get(‘some_url’)
.then(res => res.json())
.then(data => {
// do something with the data
}).catch(err) {
conosole.error(err);
}

if you’re seeing the data come through properly in the response and you’re getting what you need without doing that then just do

axios.get(‘some url’).then(res => {
// do something in here with the data here
})

also make sure you’re getting back json if that’s what you’re looking for. check the response to see if its html or json because they can be handled a bit differently

as an “Edit” you could also handle this with async await so you dont end up in callback hell

async function fetchData() {
try {
const res = await axios.get(‘some url’);
// next step might not be necessary
const data = await res.json();
// do something with the data
console.log(data); // if converting it was necessary
console.log(res); // if not converting
} catch (err) {
console.error(err);
}
}

[Vue.js] catching response of post request after post's succeeded

when creating a post request and it’s executing successfully and I can see that response in the network tab.

when trying to store that response so that I can use that further ahead, but when not able to do so. I don’t exactly know how can I store that response, can anyone guide me about that?

there is created a post like below sample and I was trying to put .then after but I think it just hadn’t worked for me.

const current = api();
await current.post(`/sampleUrl`,formData);

Solution :

As I do not know what’s the current stack for managing XHR requests, I make a general example supposing the abstraction returns a promise:

const current = api();

getAPI = async () => {
let res = await current.post(`/sampleUrl`,formData);
let { data } = await res.data;
console.log(data); // logs the response
};

Solution 2:

Which module are you using for POST requests?

In request this saves the response. This might do it for you.

const request = require(“request”);
const response = request.post(data);

[Vue.js] Module @google-cloud/speech not supported for Vue JS?

I’m playing with the Google Cloud API Speech-to-Text Node client library. Works quite well, and well described in their documentation.
Problems come when I wanted to use it in a VueJS : it simply seems not to be supported.

First attempt :
npm run serve returns

ERROR Failed to compile with 3 errors 11:35:13

This dependency was not found:

* http2 in ./node_modules/@grpc/grpc-js/build/src/channel.js, ./node_modules/@grpc/grpc-js/build/src/subchannel.js and 1 other

But http2 is a core module in Node now, and when I run node -p http2 I do get results.

Second attempt :

npm i http2
npm run serve returns

WARNING Compiled with 1 warnings 11:41:07

warning in ./node_modules/http2/lib/protocol/index.js

Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

In browser, console provides error

Uncaught Error: not supported
at Root.loadSync (root.js?ee6e:234)
at Object.loadSync (index-light.js?071f:69)
at Object.eval (index.js?f193:244)
at eval (index.js:250)
at Object../node_modules/@grpc/proto-loader/build/src/index.js (app.js:1383)
at __webpack_require__ (app.js:724)
at fn (app.js:101)
at Object.eval (grpc.js?6f5f:34)
at eval (grpc.js:288)
at Object../node_modules/google-gax/build/src/grpc.js

My vue.js App is basic and can be retrieved using vue-cli by running vue.js create app. I then added in the HelloWorld Component the basic code displayed in the quickstart guide.

My theory is : VueJS can’t use google-gax module due to gRPC. What do you think ?

Solution :

Currently the Google Cloud API client libraries such as the one you are using cannot be used from the browser. As you noted, those libraries use gRPC, which in turn uses http2. The problem is that currently no major browser allows JavaScript libraries to use the full functionality of the HTTP/2 protocol, so there is currently no complete browser shim for the Node http2 module.

The http2 module you got from npm is a different library with a different API. It most likely also does not work in the browser for the same reason.

[Vue.js] How do I overwrite input items in session in Vue.js?

When the input screen is opened when the screen is displayed, input items on the screen are set from session information.
However, although jQuery performs display switching based on the value of the input item on the screen, switching is performed based on the initial value (on the program), not the session information.
Presumably, jQuery display switching is performed before session information is set (the initial data is set in the input item).

For example, in the following source, a session is set, but the screen is displayed with the content of category = 1.

And the point of concern is that the following warning is displayed.

[vue.js warn]: Avoid adding reactive properties to a vue.js instance or its root $ data at runtime-declare it upfront in the data option.

data: {
url: “”,
category: 1,
errors: {},
},
created: function() {
let count_data = 0;
for (let key in old_data) {
if (old_data[key] != null && old_data[key] != “”) {
count_data += 1;
}
}
if(count_data > 0) {
for(let key in old_data){
this.$set(this, key, old_data[key]);
}
}else{
let that = this;
axios.get(‘api/getSession’)
.then(res => {
Object.entries(res.data).map(function(data){
that.$set(that, data[0], data[1]);
});
})
}
},

Solution :

That console message is generated whenever a new property is added to the object returned from data. You shouldn’t be getting that message for properties like “category” or “url”, but you will if something else is added.

Try generating console messages wherever $set is called to ensure that key or data[0] is not a new unknown property. If it is, try adding it to the data object as a null or empty string.