[Vue.js] How can I disable buttons except to the button I click? Subscribe to RSS

there is a table inside the modal. When the user clicks the button ‘Show Modal’ the modal will show. I’m trying to disable all the button except the button I click which become green when clicked. the green button named ‘Selected’ remains to enable and the rest of the red button named ‘Select’ is disabled. How can I do that? Can somebody help me with my problem? Here’s my jsfiddle –> https://jsfiddle.net/gLbwe8fy/1/

makeBeneficiaryButton : function(id, index) {
if(event.target.innerText == “Select”) {
event.target.innerText = “Selected”;
event.target.style.backgroundColor = “green”;
$(“#myModal11”).find(‘button#select’).prop(‘disabled’, ‘disabled’);
}
else {
event.target.innerText = “Select”;
event.target.style.backgroundColor = “#cc0000”;
}

}

Solution :

You are using plain js code which is not a problem but I’m going to give you a solution more vuejs oriented.

var vm = new Vue({
el: ‘#vue-app’,
data : {
dependents: [{
dependent_id : 1,
dependent_first_name : “John”,
dependent_middle_name : “Denver”,
dependent_last_name : “Doe”,
dependent_address : “USA”,
dependent_contact_no : “431-431-431”
},
{
dependent_id : 2,
dependent_first_name : “John”,
dependent_middle_name : “Denver”,
dependent_last_name : “Doe”,
dependent_address : “USA”,
dependent_contact_no : “431-431-431”
},
{
dependent_id : 3,
dependent_first_name : “John”,
dependent_middle_name : “Denver”,
dependent_last_name : “Doe”,
dependent_address : “USA”,
dependent_contact_no : “431-431-431”
}],
selected: null
},
methods : {
isDisabled (index) {
if (this.selected === null) return false;
return index != this.selected;
},
innerText (index) {
if (index === this.selected) return ‘selected’;
return ‘select’;
},
backgroundColor (index) {
if (index === this.selected) return “background-color: green”;
return “background-color: #cc0000”;
},
makeBeneficiaryButton : function(index) {
this.selected = this.selected === null ? this.selected = index : null;
}
}
});
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel=”stylesheet” href=”https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity=”sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T” crossorigin=”anonymous”>
<script src=”https://cdn.jsdelivr.net/npm/vue/dist/vue.js">
</script>
</head>
<body>
<div id=”vue-app”>
<button class=”btn bg-success btn-sm text-light” href=”#add” data-toggle=”modal” data-target=”#myModal11”>Show Modal</button>

<!– Modal Header –>
<div class=”modal-header”>
<h4 class=”modal-title”></h4>
</div>

<!– Modal body –>
<div class=”modal-body” id=”modal-medicine”>
<table class=”table table-responsive-sm table-hover table-bordered text-center mt-2”>
<thead class=”thead-info”>
<tr>
<th>ID</th>
<th>Full Name</th >
<th>Address</th>
<th>Contact No</th>
<th>Action</th>
</tr>
</thead>
<tbody v-if=”dependents.length > 0”>
<tr v-for=”(dependent, index) in dependents”>
<td>{dependent.dependent_id}</td>
<td>{dependent.dependent_first_name + “ “ + dependent.dependent_middle_name + “ “ + dependent.dependent_last_name}</td>
<td>{dependent.dependent_address}</td>
<td>{dependent.dependent_contact_no}</td>
<td>
<button :id=”index” @click=”makeBeneficiaryButton(index)” :style=”backgroundColor(index)” class=”btn btn-sm text-light” class=”btn bg-success btn-sm” :disabled=”isDisabled(index)”>{ innerText(index) }</button>
</td>
</tr>
</tbody>
<tbody v-else>
<tr>
<td colspan=”12” style=”font-size: 20px; text-align: center”><b>No dependent to show</b></td>
</tr>
</tbody>
</table>
</div>
<!– Modal footer –>
<div class=”modal-footer”>
<button type=”button” class=”btn btn-primary” data-dismiss=”modal”>
<i class=”far fa-save”> </i> Save
</button>
</div>
</div>
</div><!– update modal end –>
</div>
</div>
</body>
<script src=”https://code.jquery.com/jquery-3.3.1.js" integrity=”sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=” crossorigin=”anonymous”></script>
<script src=”https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity=”sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM” crossorigin=”anonymous”></script>

[Vue.js] How to fix Not found when refresh page with vue js SPA in Apache Server? Subscribe to RSS

I just deploy my vue.js js project to apache server. My file /dist located in /var/www/html/dist. When i visit the page it’s work fine. But when i visit in another page and i refresh the page, in browser say 404 Not found. How can i fix this ?

Solution :

You need a configuration something similar to this:

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
</IfModule>

It will automatically serve index.html file for every request that doesn’t have a corresponding static file. You will have to put this .htaccess file. The use of IfModule is explained here.

[Vue.js] Vue.js How to define (override) css style in a Component? Subscribe to RSS

The default style for the p tag on my page has some bottom margin. My component uses p tags, and accordingly, the p tags in my component text show the corresponding bottom margin. How can I override/define new css style for the p tags in my component. I define my component like this:

Vue.component (‘activity-component’, {

props: {

customer_id:{},
is_admin:{},
isAdmin:{},
isKitsActionplan:{},
….

template:
`<div
class=”row msDashboard-box”
style=”cursor:default;padding-top:12px;
padding-bottom:12px;”
\>
…
<p> … </p>
});

Solution :

Maybe u can try this approach,
Pass a variable with the class name to the component

<my-component v-bind:class=”variable with class name”></my-component>

Then apply a rule to all p elements inside it, something like this i guess:

.test p{
the styles
}

U can see more here: vue.js api class and style bindings

I dont know for sure if this was what you wanted, but i gave it a shot :)

Solution 2:

You have several options - choose the own adventure:

Use a global utility style

Somewhere globally, define a utility class like:

.u-margin-reset {
margin: 0;
}

Then in the template:

<p class=”u-margin-reset”>hello</p>

Use scoped CSS

If you are using single file components, you can use scoped css:

<template>
<p class=”special-p”>hello</p>
</template>

Use inline styles

Vue.component(‘activity-component’, {
template: `<p style=”margin:0;”></p>`,
});

or

Vue.component(‘activity-component’, {
computed: {
myStyle() {
return {
margin: 0,
};
},
},
template: `<p :style=”myStyle”></p>`,
});

As an aside, I’d recommend using a CSS reset that globally resets the margins of all elements to 0. Then each component should set the margins as needed for its child elements/components. This may not be reasonable if you already have a large codebase, however.

[Vue.js] Emit data between components (Event listener in vue?) Subscribe to RSS

I’m kind of new to vue.js and I’m trying to emit data between different components.

there is 2 components I need to emit their data together:
First component is the Item Selector.
Second component is Filter Navigation Bar.

the logic:
The navigation bar contains a filter section, I’ve created an ItemSelector component and import it to the navigation bar.
the data selected in the item selector will be emited to the container and a table will be draw by that information.
I created the logic of the table, and tried to import the item selector component directly to the container and passing the data using emit, and it worked great.
The problem is I’ve added one more page to the cycle.
Right now, the ItemSelector component emits its data to the FilterContainer component, and now this data should be emited to the container!

Is there any way to catch all those events in a seperate component, compute the data and emit it all over the app?

Solution :

You can use a global event bus which can listen/emit event on global scope of the app.

Another approach is using vuex which store all global states of the app.

If you have small app, i think you should use event bus because it simpler than vuex.

Solution 2:

In vue.js for this situation created vuex store. I recomend to you check the documentation Vuex Store

</div>

<button v-on:click=”toggleDone(todo)” class=”btn btn-default flex-item”>{todo.done ? “Done” : “Not Done”}</button>
<button v-on:click=”removeTodo(todo)” class=”btn btn-danger flex-item”>Remove</button>

</li>
</ul>
</div>
</div>

Vuex example in Codepen

This blog help to you understand how vuex store is works Blog link

[Vue.js] Take v-model value and create loop with v-for Subscribe to RSS

there is a input field. This field is contain number. to take this number and use this number with for loop.

On my example there is number 5 inside input field and to write li five times. Ok it is work! But when i change number to 10 there is just write 10 it is not inside loop anymore and it is not show 10 times li loop.

How can i show dynamically v-model value with v-for?

var app = new Vue({
el:’#app’,
data: {
uTopX: 5,
}
});
<script src=”https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

Solution :

The problem is that v-model returns anything you enter as string.

using v-model.number is the simplest solution.

var app = new Vue({
el:’#app’,
data: {
uTopX: 5,
}

});
<script src=”https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

[Vue.js] Update dynamic components disabled state based on Vuex state value Subscribe to RSS

there is no idea if what I’m doing is correct or not, but here’s a simplified version of what I’m trying to do:

to have 3 file inputs, with the 2nd and 3rd disabled until the 1st one has had a file selected.

I’ve tried to do is set the Vuex state variable to whatever the first file input is has selected, but upon doing that the other 2 inputs don’t update their disabled state.

there is some file inputs that are created dynamically, like so:

Vue.component(‘file-input’, {
props: [‘items’],
template: `<div><input type=”file” v-on:change=”fileSelect(item)” v-bind:id=”item.id” v-bind:disabled=”disabledState”></div>`,
methods: {
fileSelect: function(item) {
store.commit(‘fileSelect’, file);
}
},
computed: {
disabledState: function (item) {
return {
disabled: item.dependsOn && store.getters.getStateValue(item.dependsOn)
}
}
}
}

The data for the component is from the instance:

var vm = new Vue({
data: {
items: [
{ text: “One”, id: “selectOne” },
{ text: “Two”, id: “selectTwo”, dependsOn: “fileOne” },
{ text: “Three”, id: “selectThree”, dependsOn: “fileOne” }
}
});

Now, notice the “dependsOn”. In the Vuex store, there is a corresponding state item:

Now, the above works when everything is first initialized. But once the first input has something selected, the other two inputs don’t change.

I’m not sure how to update the bindings once a mutation of the state occurs.

Solution :

I think you need to refactor the mutation to make the state property mutable, like this:

fileSelect(state, file) {
Vue.set(state.files[0].fileOne, file);
}

Solution 2:

Well, I figured it out…

Because my state object is an array of objects, I can’t just change one of the property’s values with state.files.fileOne. I needed to do state.files[0].fileOne.

[Vue.js] Vertical vuetify tabs Subscribe to RSS

to create vuetify vertical tabs, but I don’t now props for it.

It’s my vue.js template in component:

Now there is tabs like this
vuetify example

Solution :

Check this link https://next.vuetifyjs.com/en/components/tabs#vertical-tabs

Vertical tabs are supported in 2.0 version on vuetify.

If you need vertical tabs on 1.5 version check this link https://gist.github.com/jacekkarczmarczyk/eca6015c176e85ea78706e63383bbe5c it may help.

[Vue.js] Need Clarity on Chartjs - Asp.NetMVC or Vue-ChartJS -Asp.Net MVC Subscribe to RSS

when new in Coding world. there is a assignment where we are using Asp.net MVC along with Chartjs and Vuejs.

when currently looking at examples using chartjs in ASP.Net MVC and making mockup.

How different it would be if I incorporate Vue.js later…will it would be different syntax altogether.

Need help in understanding the difference.

Thanks.

Conceptual understanding needed.

Solution :

the question is very open but I’ll try giving you the concept:

I’ve not worked with ASP.NET MVC but I assume it could work like any other backend framework and vue.js is the frontend.

You can move data back and forth from the backend(ASP.net which interfaces with the database) using a simple api which vue.js can utilize/consume.

Try setting up the ASP.NET with vue.js first. You can see this or any other example from online.
Add chartjs to the vue.js frontend consuming the data from the backend.

[Vue.js] How to pass ref from parent to child component in template Subscribe to RSS

when using this component https://element.eleme.io/#/en-US/component/popover

Issue related to triggering element (it is used to calculate where is popover located)

For the triggering element, you can write it in two different ways: use the slot=”reference” named slot, or use the v-popover directive and set it to Popover’s ref.

Everything ok with default examples. But when using transparent wrapper for el-popover component like so.

It works ok with slot=”reference” named slot.

<my-popover
placement=”bottom”
title=”Title”
width=”200”
trigger=”manual”
v-model=”visible”
\>
<el-button
slot=”reference”
@click=”visible = !visible”
\>
Click me
</el-button>
</my-popover>

But due to complex layout I need to use v-popover directive. Got no luck with wrapped component.

<my-popover
ref=”popover”
placement=”right”
title=”Title2”
width=”200”
trigger=”manual”
v-model=”visible2”
\>
</my-popover>
<el-button
v-popover:popover
@click=”visible2 = !visible2”
\>
Click me too
</el-button>

So I need somehow to pass in v-popover reference to ref=”mypopover” from wrapped component. I.e. pass ref to child directly in template.

I’ve tried v-popover:popover.$refs.mypopover but that doesn’t work.

Related codepen https://codepen.io/anon/pen/rgRNZr

Click on button Click me too should show popup connected to that button.

Solution :

The problem is that the ref you want is the one that is on the el-popover but you are using the ref that is set on the my-popover component instead of the one you want.

This is kind of a wierd thing since that component wants a ref but it will be annoying to get one from the component inside the component.

I would put the button and popup with a slot in the same component.

[Vue.js] store getter returns observer object instead of null Subscribe to RSS

I would like to create a simple “Conway’s Game of Life” application and store the settings that have already been made to the localStorage.

I created three views

Map Settings
| Define map size etc.
Map Setup
| Create a preset for the map
Map Launch
| Launch the preset

Whenever the settings change the preset has to be deleted because the preset might have a different old size. The settings use default values if the localStorage is empty.

Within my store I save the map setup to the grid property. So the value is either null or a two dimensional array from the localStorage.

When routing to the MapSetup.vue.js file I use the mounted event to setup the preset

mounted: function() {
if (this.grid) { // the preset from the store / localStorage
this.currentGrid = this.grid; // use the preset
} else {
this.currentGrid = this.generateNewMap(); // generate a new preset
}
}

Unfortunately this.grid (store getter) is not null and returns an __ob__ observer item. Because of this the if statement is truthy and will not generate a new preset.

I created a working example of my application here

https://codesandbox.io/s/vuetify-vuex-and-vuerouter-h6yqu

You can define the settings in MapSettings.vue.js and the grid state from mapSetup should be set to null. After redirecting to MapSetup.vue.js no grid should appear because this.grid returns __ob__ observer instead of null.

How can I fix it?

Solution :

[MutationTypes.RESET_MAP_SETUP]: state => {
state.grid = [];
}

when you reset the grid, you set it as an empty array, not as null
that is why it’s not null in the mounted hook

Top 10 Web Skills

html5, css3, javascript, node.js, etc