link0 link1 link2 link3 link4 link5 link6 link7 link8 link9 link10 link11 link12 link13 link14 link15 link16 link17 link18 link19 link20 link21 link22 link23 link24 link25 link26 link27 link28 link29 link30 link31 link32 link33 link34 link35 link36 link37 link38 link39 link40 link41 link42 link43 link44 link45 link46 link47 link48 link49 link50 link51 link52 link53 link54 link55 link56 link57 link58 link59 link60 link61 link62 link63 link64 link65 link66 link67 link68 link69 link70 link71 link72 link73 link74 link75 link76 link77 link78 link79 link80 link81 link82 link83 link84 link85 link86 link87 link88 link89 link90 link91 link92 link93 link94 link95 link96 link97 link98 link99 link100 link101 link102 link103 link104 link105 link106 link107 link108 link109 link110 link111 link112 link113 link114 link115 link116 link117 link118 link119 link120 link121 link122 link123 link124 link125 link126 link127 link128 link129 link130 link131 link132 link133 link134 link135 link136

[Vue.js] Vuetify create image that links to another page

I’m trying to make an image link in my vue.js app. I’ve tried the following but it doesn’t work:

<v-img :src=”require(‘@/assets/my-image.png’)” to=”/“></v-img>

I’ve also tried wrapping the image in a router-link element but no luck:

<router-link to=”/“>
<v-img :src=”require(‘@/assets/my-image.png’)”></v-img>
</router-link>

Any idea what I’m doing wrong. This shouldn’t be that difficult.

Solution :

Try this (src vs :src):

<router-link to=”/“>
<v-img src=”require(‘@/assets/my-image.png’)”></v-img>
</router-link>

Solution 2:

Does this (or something similar) work?

<img alt=”vue.js logo” :src=”require(‘@/assets/logo.png’)”>

Of course, I’m not sure what the advantage of using v-img in the case is…

[Vue.js] Vue JS replacing orderBy filter with lodash

there is switched from vue.js JS v1 to v2 and I noticed that orderBy filter does not work anymore.

I replaced it with lodash.

I followed this SO answer:

https://stackoverflow.com/a/40512856/7804813

However, the icons & sorting are not working with it. Did I miss something?

I’m migrating from:

var app = new Vue({
el: ‘#app’,

data: {
activeColumn: {},
columns: [
{name: ‘deviceinfo’, order: 1},
{name: ‘present’, order: 1},
{name: ‘agent’, order: 1},
],
colTitles: {‘deviceinfo’:’Device Info’, ‘present’:’Present’, ‘agent’:’Agent’},
items: [
{ deviceinfo: ‘ddd’, present: ‘true’, agent: ‘eee’ },
{ deviceinfo: ‘bbb’, present: ‘false’, agent: ‘ddd’ },
{ deviceinfo: ‘ccc’, present: ‘true’, agent: ‘aaa’ },
{ deviceinfo: ‘aaa’, present: ‘false’, agent: ‘ccc’ },
{ deviceinfo: ‘eee’, present: ‘true’, agent: ‘bbb’ },
]
},
});
<script src=”https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.js"></script>
<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id=”app”>
<table border=”1” style=”width:100%”>
<thead>
<tr>
<th v-for=”column in columns”
@click=”activeColumn = column”
:class=”{active: column == activeColumn}”
\>
{ colTitles[column.name] }
<span
@click=”column.order = column.order * (-1)”
class=” { column.order > 0 ? ‘glyphicon glyphicon-chevron-down’ : ‘glyphicon glyphicon-chevron-up’ }”
v-show=”column == activeColumn”>
</span>
<span class=”glyphicon glyphicon-sort” v-show=”column != activeColumn”></span>
</th>
</tr>
</thead>

<tr v-for=”item in items | orderBy activeColumn.name activeColumn.order”>
<td>{ item.deviceinfo }</td>
<td>{ item.present }</td>
<td>{ item.agent }</td>
</tr>
</table>

<pre> Active Column: { activeColumn | json }</pre>
</div>

https://jsfiddle.net/Lgp2oahu/1/

to

var app = new Vue({
el: ‘#app’,

data: {
activeColumn: {},
columns: [
{name: ‘deviceinfo’, order: 1},
{name: ‘present’, order: 1},
{name: ‘agent’, order: 1},
],
colTitles: {‘deviceinfo’:’Device Info’, ‘present’:’Present’, ‘agent’:’Agent’},
items: [
{ deviceinfo: ‘ddd’, present: ‘true’, agent: ‘eee’ },
{ deviceinfo: ‘bbb’, present: ‘false’, agent: ‘ddd’ },
{ deviceinfo: ‘ccc’, present: ‘true’, agent: ‘aaa’ },
{ deviceinfo: ‘aaa’, present: ‘false’, agent: ‘ccc’ },
{ deviceinfo: ‘eee’, present: ‘true’, agent: ‘bbb’ },
]
},
computed:
{
sort: function(){
return _.orderBy(this.items, ‘activeColumn.name’, ‘activeColumn.order’);
}
}
});
<script src=”https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src=”https://unpkg.com/lodash@4.16.0/lodash.js"></script>
<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id=”app”>
<table border=”1” style=”width:100%”>
<thead>
<tr>
<th v-for=”column in columns”
@click=”activeColumn = column”
:class=”{active: column == activeColumn}”
\>
{ colTitles[column.name] }
<span
@click=”column.order = column.order * (-1)”
class=” column.order > 0 ? ‘glyphicon glyphicon-chevron-down’ : ‘glyphicon glyphicon-chevron-up’”
v-show=”column == activeColumn”>
</span>
<span class=”glyphicon glyphicon-sort” v-show=”column != activeColumn”></span>
</th>
</tr>
</thead>

<tr v-for=”item in sort”>
<td>{ item.deviceinfo }</td>
<td>{ item.present }</td>
<td>{ item.agent }</td>
</tr>
</table>

<pre> Active Column: { activeColumn | json }</pre>
</div>

https://jsfiddle.net/Lgp2oahu/2/

Solution :

Yes you did,

Change the computed sort() to this:

sort: function() {
return _.orderBy(this.items, this.activeColumn.name, this.activeColumn.order);
}

[Vue.js] How to array map instead of nested for loops

For my scenario, I need to push elements to an addresses array which contains objects. I’m working with vue.js.

My current working function is:

propagateCustomerInfo(selectedOption, id){

// Propagate addresses
this.addresses = selectedOption.addresses

// Propagate contact’s addresses
for (var i = selectedOption.contacts.length - 1; i >= 0; i–) {
for (var j = selectedOption.contacts[i].addresses.length - 1; j >= 0; j–) {
let address = selectedOption.contacts[i].addresses[j]
address.contact = selectedOption.contacts[i]
this.addresses.push(address)
}
}
},

the selectedOption object has the below structure:

{
addresses: [
{
id: 0,
street: ‘My street’
},
{…}
],
contacts: [
{
id: 0,
name: ‘Lorem Ipsum’,
addresses: [
{
id: 0,
street: ‘My street’
},
{…}
],
}
]
}

Besides pushing every contact’s address object to this.addresses array I need to append the contact to the address itself for multiselect rendering purposes. That’s why I’m doing address.contact = selectedOption.contacts[i]

I almost sure that this can be accomplished in a prettiest way with some mapping/reduce combination but I can’t figure out how to do it.

Any help will be really appreciated.
Thanks!

Solution :

if you want to combine all address in contact variable to addresses variable:

this.contacts.map(contact => this.addresses.push(…contact.addresses))

Edit.
to inject the contact.id and contact.name:

this.contacts.map(contact => {
let temp = []
contact.addresses.map(address => {
temp.push({
name: contact.name,
id: contact.id,
…address
})
})
this.addresses.push(…temp)
})

[Vue.js] setInterval doesn't fire in vue

im learning vue.js and setInterval doesn’t work like in normal javascript? the problem is that my update function doesn’t get fired.
start gets fired from a button, and hours/minutes/seconds are bound to input fields with v-model, i get all console.logs before the setInterval.

export default Vue.extend({
name: “timer-c”,

data() {
return {
startDate: undefined,
hours: “”,
minutes: “”,
seconds: “”,
timeLeft: undefined,
endDate: undefined,
interval: undefined,
text: “00:00:00”,
sub: undefined,
};
},

methods: {
start: function() {
if (this.sub === undefined) {
let sum = 0;
if (this.seconds.match(/^\d+$/)) {
sum = sum + this.seconds * 1000;
console.log(sum);
}
if (this.minutes.match(/^\d+$/)) {
sum = sum + this.minutes * 60 * 1000;
}
if (this.hours.match(/^\d+$/)) {
sum = sum + this.hours * 60 * 60 * 1000;
}
if (sum === 0) {
console.log(this.$refs.br_start);
this.failed = true;
} else {
console.log(sum);
this.failed = false;
this.endDate = new Date(Date.now() + sum);
console.log(this.endDate);
this.startDate = new Date(Date.now());
console.log(this.startDate);
this.interval = setInterval(time => this.update, 1000);
//this.sub = this.interval.subscribe(time => this.update(time));
}
}
},
update: function() {
console.log(‘test’);
const timeRemaining = Math.round((Date.now() - this.endDate) / 1000);
this.text = timeRemaining;
if (new Date(Date.now()) >= this.endDate) {
console.log(“test”);
}
},

Solution :

Try to not return the function but execute it

this.interval = setInterval(time => { this.update(time) }, 1000);

[Vue.js] How to use SASS / SCSS with latest vue-cli starter project?

I need to use SASS or SCSS in my project.

I used the vue-cli to make the latest version of a starter project.

Anyone had any success in making sass/scss work in the newest starter project with webpack?

Solution :

you install the necessary dependencies

npm install -D node-sass sass-loader
for global styles, simply import the file into main.js:

import ‘./styles/my-styles.scss’
in .vue.js files, add the lang to the <style> element.

<style lang=”scss”>

If using webstorm:

<style lang=”scss” rel=”stylesheet/scss”>

Solution 2:

Add this in the package.json in scripts and run

“compile:sass”: “node-sass ‘the main scss file location’ ‘the compiled css file location’ -w”

Please make sure that node-sass and sass-loader are added properly.

And then in you App.vue.js file add this, then run

<style lang=”scss”>

@import ‘the compiled css file location’;

</style>

This works for me.

Thanks

[Vue.js] updateOrCreate a row and skip a column update if we got null, keep the original value

Is it possible to do this? I got a function that takes these parameters.

Upon the first time it’s called it will create all possible settings that are defined by a JSON file and save them to the database. Important column here is meta, which is string column but saves json values.

Once data has been saved to the database, meta values do not need to be modified anymore and we do not need to send them from UI back to the server when we want to save. What will happen bellow if $meta is null? It will set the meta column to null as well. Is there an elegant way to tell laravel not to update the column if the value that comes in is null, so it keeps the old values?

public function saveSetting($section, $parent, $key, $value, $type = ‘string’, $meta)
{
if(is_array($value) || is_object($value)) {
$type = ‘json’;
$value = json_encode($value);
}

$setting = $this->settings()->updateOrCreate(
[‘theme_id’ => $this->id, ‘section’ => $section, ‘key’ => $key],
[‘section’ => $section, ‘parent_id’ => $parent, ‘key’ => $key, ‘value’ => $value, ‘type’ => $type, ‘meta’ => $meta]
);

return $setting;
}

Right now only solution I think of is where I use an if to see if meta is set, something like this:

public function saveSetting($section, $parent, $key, $value, $type = ‘string’, $meta)
{
if(is_array($value) || is_object($value)) {
$type = ‘json’;
$value = json_encode($value);
}

if(isset($meta)) {
$setting = $this->settings()->updateOrCreate(
[‘theme_id’ => $this->id, ‘section’ => $section, ‘key’ => $key],
[‘section’ => $section, ‘parent_id’ => $parent, ‘key’ => $key, ‘value’ => $value, ‘type’ => $type, ‘meta’ => $meta]
);
} else {
$setting = $this->settings()->updateOrCreate(
[‘theme_id’ => $this->id, ‘section’ => $section, ‘key’ => $key],
[‘section’ => $section, ‘parent_id’ => $parent, ‘key’ => $key, ‘value’ => $value, ‘type’ => $type]
);
}

return $setting;
}

Is there any better way to skip updating meta?

This is how code that calls saveSetting function looks like:

foreach ($section as $key => $setting) {
$theme->saveSetting($sectionKey, $sectionSetting->id, $key, $setting[‘value’], $setting[‘type’], null);
}

meta is set to null, since we already have meta in the database and our UI does not need to send it to the server upon user pressing save. We only send to server data user actually can modify.

Solution :

If I understand the problem right… Why don’t you want something like this?

$dataToUpdate = [
‘section’ => $section,
‘parent_id’ => $parent,
‘key’ => $key,
‘value’ => $value,
‘type’ => $type
];

if ($meta) {
$dataToUpdate[‘meta’] = $meta;
}

$setting = $this->settings()->updateOrCreate(
[
‘theme_id’ => $this->id,
‘section’ => $section,
‘key’ => $key
],
$dataToUpdate
);

Solution 2:

You could also implement that by using Laravel collections’ methods:

public function saveSetting($section, $parent, $key, $value, $type = ‘string’, $meta)
{
$attributes = collect([
‘section’ => $section,
‘parent_id’ => $parent,
‘key’ => $key,
‘value’ => $value,
‘type’ => $type
])->when($meta, function ($attributes, $meta) {
return $attributes->put(‘meta’, $meta);
})->when(is_array($value) || is_object($value), function ($attributes) use ($value) {
return $attributes->merge([
‘value’ => $value,
‘type’ => ‘json’
]);
});

return $this->settings()->updateOrCreate(
[‘theme_id’ => $this->id, ‘section’ => $section, ‘key’ => $key],
$attributes
);
}

[Vue.js] Array of objects on Vue method

there is an object of type “Sorteio” and inside it a vector of objects of type “Resultado”, specifically 6 Resultados. I’m instantiating them this way:

saveSorteio() {
var data = {
loteria: this.sorteio.loteria,
resultados: [
{
valor: this.sorteio.resultados[0].valor,
animal: this.sorteio.resultados[0].animal
},
{
valor: this.sorteio.resultados[1].valor,
animal: this.sorteio.resultados[1].animal
},
/* … */
]
};
}

Is there another way to instantiate the 6 at once or do I need to keep calling index by index?

Solution :

You can use #array.map() to make an array that pulls out these properties:

saveSorteio() {
var data = {
loteria: this.sorteio.loteria,
resultados = this.sorteio.resultados.map(({valor, animal}) => ({valor, animal}))

/* … */

};
}

For example:

sorteio = {
resultados: [
{valor: “v1”, animal: ‘a1’, somethingelse:”else”},
{valor: “v2”, animal: ‘a2’, somethingelse:”else”},
{valor: “v3”, animal: ‘a3’, somethingelse:”else”}
]
}
let newArray = sorteio.resultados.map(({valor, animal}) => ({valor, animal}))
console.log(newArray)

Solution 2:

Welcome on SO,

try this :)

let resultados =
[
{
valor: 1,
animal: “dog”
},
{
valor: 2,
animal: “cat”
},
{
valor: 3,
animal: “bird”
},
]

let data = {loteria: “somedata”,
resultados: []

}
let i = 0
resultados.forEach(function(element) {
data.resultados.push(resultados[i])
i++
});

console.log(data)

[Vue.js] How to make Vuex reactive to attribute/property changes in objects inside lists

In a vuex store file there is a variable thats initially an empty list.
This list will eventually contain users, which are objects with the form id, firstname, lastname, (…)

export const state = () => ({
users: []
})

Throughout the lifetime of the application I push users. there is a page on my application that displays user data. All is fine, until one user needs to be updated.

let user = state.user.find(u => u.Id == user.Id)
user.firstname = newFirstname
user.lastname = newLastname

This is a problem because the page will not be updated. I also can’t say which properties the user list will have because it’s a list and not an object. So how do I handle this?

Solution :

Create the newUser object and then use vue.js set.

Vue.set(array, indexOfItem, newValue) // or this.$set(…)

For more info, see the docs.

[Vue.js] Add active class a column to table (as in netflix)

I need help to select a table header and select the column using classes. As in Netflix. I’m noob in VueJS

Example GIF

My code is

<table class=”table”>
<thead class=”text-center”>
<tr>
<th scope=”col”><button type=”button” class=”btn plan_columnA selected” @click=”planSelect(‘plan_columnA’)”>Column A</button></th>
<th scope=”col”><button type=”button” class=”btn plan_columnB” @click=”planSelect(‘plan_columnB’)”>Column B</button></th>
<th scope=”col”><button type=”button” class=”btn plan_columnC” @click=”planSelect(‘plan_columnC’)”>Column C</button></th>
</tr>
</thead>

<tbody class=”text-center”>
<tr>
<td class=”plan_columnA selected”>Mark</td>
<td class=”plan_columnB”>Otto</td>
<td class=”plan_columnC”>@mdo</td>
</tr>
<tr>
<td class=”plan_columnA selected”>Jacob</td>
<td class=”plan_columnB”>Thornton</td>
<td class=”plan_columnC”>@fat</td>
</tr>
<tr>
<td class=”plan_columnA selected”>Larry</td>
<td class=”plan_columnB”>the Bird</td>
<td class=”plan_columnC”>@twitter</td>
</tr>
</tbody>
</table>

My style is

.btn {
background-color: darkgrey;
color: white;
}
button.selected {
background-color: red;
}
td.selected {
color: red;
}

I try to do this, but I do not know if it’s right

export default {
data () {
return {
planSelected: ‘’,
}
},

methods: {
planSelect (plan) {
this.planSelected = plan;

$(‘.selected’).removeClass(‘selected’);
$(‘.’ + this.planSelected).addClass(‘selected’);
},
},
}

I tried JQuery, but to do it in VueJS.

Thanks!

Solution :

That’s fairly easy, i’ve made an example for you in a fiddle, hope it helps you on the way. It should be made more dynamically, for better overview, but you can play around with the code i’ve made.

In the perfect scenario, you would generate all rows/columns from a data variable, instead of doing all this manually.

https://jsfiddle.net/6aojqm0k/

What i’ve made is just having 1 data variable, which you set and check for on the different tds and buttons.

data: () => ({
planSelected: ‘plan_columnA’
})

Button to choose the plan:

<button type=”button” class=”btn plan_columnA” :class=”{selected: planSelected === ‘plan_columnA’ }” @click=”planSelected = ‘plan_columnA’”>Column A</button>

And the actual column to show selected

<td class=”plan_columnA” :class=”{selected: planSelected === ‘plan_columnA’ }”>Mark</td>

Pro tip: Never combine jQuery and VueJS - Just use VueJS