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] How to get imported component's data on Vue.js?

I was having problem while making a toggleable navigation using a vue.js component called vue-tasty-burgers.
to show my menu when data from the imported Component isActive is true using v-show but can’t seems to find any way to get the data.

I tried to include v-show=”isActive” but it doesn’t seems to get the variable from my isActive burger component’s data.

This is where I get so far:

<transition name=”fade”>
<div v-show=”isActive” class=”menu”>
<transition-group name=”list” tag=”nav”>
<router-link key=”home” to=”/Home” class=”menu-item”>
Home
</router-link>
<router-link key=”portfolio” to=”/Portfolio” class=”menu-item”>
Portfolio
</router-link>
<router-link key=”technology” to=”/Technology” class=”menu-item”>
Technology
</router-link>
</transition-group>
</div>
</transition>
<div class=”hero”>
<div class=”header”>
<router-link to=”home”>
<div class=”brand”>
<img src=”../assets/brand.png”>
<div class=”tagline”>
Your<br>Little<br>Spaceship
</div>
</div>
</router-link>
<div class=”burger”>
<tasty-burger-button
type=”spin”
color=”#fff”
activeColor=”#fff”/>
</div>
</div>
</div>

TL;DR - How do I get data from imported burger component’s isActive data?

Solution :

props propagate down, events bubble up

What that means is that you cannot get the data from the component, but instead you need to listen to the event.

here is the documentation

so you would use it something like this…

<template>
<tasty-burger-button
:active=”isActive”
@toggle=”setIsActive”
/>
</template>
<script>
export default {
data () {
return {
isActive: false,
}
},
methods:{
setIsActive(value) {
this.isActive = value;
}
}
}
</script>

[Vue.js] Asking for confirmation before changing the radio option

How do I ask the user for a confirmation before changing the option in a radio button using Vue.js?

Something like Are you sure? would be fine.

Solution :

Assuming you have the following DOM structure:

<div id=”app”>
<input type=”radio”/>
</div>

you can bind a @change directive to the radio button with a method implementing the expected “Are you sure?” confirmation popup. So you can enrich the above mentioned DOM structure like this:

<div id=”app”>
<input type=”radio” @change=”showConfirm”/>
</div>

And in the vue.js instance you can define the expected confirmation method, for example:

new Vue({
el: ‘#app’,

methods: {
showConfirm: function(event) {
event.preventDefault();
let checkedRadio = window.confirm(“Are you sure?”);
event.target.checked = checkedRadio;
}
}
})

Here you find the working example.

[Vue.js] How to see PHP debugbar? (now showing up only when error 404)

there is been trying since weeks now to debug my laravel/vuejs app with absolutely no success, so when trying to understand what happens . when debugging the “old way”, displaying errors manually… And I get a bit crazy :)

PHP debugbar seems fabulous but for some reason it only shows up when there is a 404 error… I Would like to see it all the time.

Also, “dd()” juste doesnt do anything when I do for example:

public function emailexists(string $email){
dd($email);

//this doesn’t work either
var_dump($email);
die();
}

I guess there is something I forgot. when a beginner with PHP.

EDIT: could it be because when using VueJS ?

EDIT2: after Thomas’ answer :
I guess the lifecycle is ended correctly (unless I need to do something specific? when just calling my PHP controller through axios from my vueJS view)

But here is my view.blade, could it be the issue?

@extends(‘template’)
@section(‘content’)
<div id=”app”>
<vuecomponent ></vuecomponent >
</div>
@endsection

Solution :

The debugbar gets added at the end of the request lifecycle (after middleware). Failing to properly end the lifecycle the intended way will yield the result of not having a debugbar. Both dd and die are PHP functions that stop execution immediately.

As for VueJS:

vue.js itself will not show the debugbar, just because Laravel is installed next to the vue.js entrypoint.
That doesn’t have to be a problem if you use a (Blade) view to setup Vue. However if you bypass Laravel entirely on DOM output, that yes the debugbar won’t be part of it.

Solution 2:

Check that the route points to correct page correctly or not and it really created or not.

And check exception, view and routes tab of debugger to findout proper error/exception.

Solution 3:

When you use PHP, Laravel or Vuejs all dd() or var_dump() would be useful if you can track the requests. May you just need to use a browser inspector which could show you requests responses.

[Vue.js] Error while Updating the list item in Vuejs

Hi All,

there is created a simple CRUD operation in VueJS. The values are
inserting in a list , i can read it from there only and also can
delete it from the list. But issue is when when trying to update any
value, its not getting update. Can any one help me out with it. Am i
doing anything wrong. Please let me know.

<html>
<head>
<script src=”https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id=”app”>
<form v-on:submit.prevent=”addToDo”>
<input v-model=”currentTodos” type=text><br><br>
<button type=”submit”>Add To List</button>
</form>
<ul>
<li v-for=”(todo, index) in todos”>
{todo}<button v-on:click=”deleteItemFromList(index)”>X</button><button v-on:click=”updateItemList(index)”>#</button>
</li>
</ul>
</div>
<div v-html=”htmlContent”></div>
</body>
<script>
new Vue({
el: “#app”, // el is the DOM element.
data:{
todos:[‘push’, ‘pop’, ‘paste’],
currentTodos: ‘’,
htmlcontent : “<div><input type=”text”></div>”
},
methods:{
addToDo: function(){
this.todos.push(this.currentTodos);
this.currentTodos = ‘’;
},

deleteItemFromList: function(index){
this.todos.splice(index,1)
},

updateItemList: function(index){
this.todos.set(index,1)
}
}
})
</script>
</html>

Solution :

Reactivity is not working here. Assign a new Array reference when changin todos array or you can use this.$set(…) to get the reactivity working.

methods:{
addToDo: function(){
this.todos.push(this.currentTodos);
// assign a new Array reference in this.todos
this.todos = […this.todos];
this.currentTodos = ‘’;
},

deleteItemFromList: function(index){
this.todos.splice(index,1);
this.todos = […this.todos];
},

updateItemList: function(index){
this.todos[index] = ‘1’;
this.todos = […this.todos];
}
}
<template>

<li v-for=”(todo, index) in todos” :key=”todo”>
{todo}
<button v-on:click=”deleteItemFromList(index)”>X</button>
<button v-on:click=”updateItemList(index)”>#</button>
</li>

</template>

And also add :key=”todo” in v-for

[Vue.js] (Code Refactoring) shell command using child_process in javascript

when working on a nuxt.js / vue.js project and applying the atomic design methodology, it means that the components will be divided into and hundreds of components in each folder

/components
/atoms
/molecules
/organisms

and need to import in a grouped and smart way, so i do:

in webpack.config.js or nuxt.config.js

using Compiler Hooks from webpack for each build, generating an index.js exporting components

const exec = require(‘child_process’).exec;

module.exports = {

// … other config here …

plugins: [

// … other plugins here …

{
apply: compiler => {
compiler.hooks.beforeCompile.tap(‘MyPlugin’, compilation => {
exec(‘sh assets/DynamicExport.sh’, (err, stdout, stderr) => {
if (stdout) process.stdout.write(stdout)
if (stderr) process.stderr.write(stderr)
})
})
}
}
]
};

in assets/DynamicExport.sh

ls components/atoms/ | grep -v index.js | sed ‘s#^\([^.]*\).*$#export {default as \1} from “./&”#’ > components/atoms/index.js

ls components/molecules/ | grep -v index.js | sed ‘s#^\([^.]*\).*$#export {default as \1} from “./&”#’ > components/molecules/index.js

ls components/organisms/ | grep -v index.js | sed ‘s#^\([^.]*\).*$#export {default as \1} from “./&”#’ > components/organisms/index.js

then an index.js file is generated in each folder by exporting all components of the folder

export { default as ButtonStyled } from ‘./ButtonStyled.vue’
export { default as TextLead } from ‘./TextLead.vue’
export { default as InputSearch } from ‘./InputSearch.vue’
….

Finally i can import in a clear, grouped and smart way,
anywhere in my application.

import {
ButtonStyled,
TextLead,
InputSearch
} from ‘@/components/atoms’

import {
SearchForm
} from ‘@/components/molecules’

everything works fine, however I’m finding the solution a bit big, calling a file in assets, maybe it has another way that I do not know ..

Is there any way to refactor and lower the content of assets/DynamicExport.sh something less repetitive?

Any code refactoring will be welcome.

Thanks in advance.

Solution :

It’s just a shell file, so you can do something like this:

parameters=( atoms molecules organisms )
for item in ${parameters[*]}
do
ls components/$item/ | grep -v index.js | sed ‘s#^\([^.]*\).*$#export {default as \1} from “./&”#’ > components/$item/index.js
done

And if you wanted to be really sneaky, and you knew that every subdirectory in the components directory needed to be iterated, then you could even replace the first line with:

parameters=$(ls components)

EDIT parsing ls is not safe. Here is a better approach:

for item in components/*;
do
# do something with item
done

[Vue.js] Why is Entity Framework trying to update more than one row when I save my changes?

there is the method below and when the save changes is run Entity Framework tries to update more than one row? Even though I’m only modifying a date on one record and fetching one record to modify.

Error

Microsoft.EntityFrameworkCore.DbUpdateConcurrencyException: Database operation expected to affect 1 row(s) but actually affected 2 row(s). Data may have been modified or deleted since entities were loaded.

Method

public static async Task<HttpResult> PostRecordCoworkerStartDateAsync(MpidDbContext context, int id, RecordCoworker recordCoworker)
{
// just testing to see how many are returned
int testCount = context.RecordsCoworkers.Where(m => m.Id == id && m.IsActive == true).ToList().Count();

RecordCoworker recordCoworkerToUpdate = context.RecordsCoworkers.SingleOrDefault(m => m.Id == id && m.IsActive == true);

recordCoworkerToUpdate.StartDate = recordCoworker.StartDate;

try
{
await context.SaveChangesAsync();
} catch(Exception ex)
{
var i = ex;
}

return HttpResult.NoContent;
}

Somehow when the query gets run it strips out parameters need to update correctly, for ex. ‘IsActive’ field. I’ve captured the query below.

SET NOCOUNT ON;
UPDATE [Records_Coworkers] SET [StartDate] = @p0
WHERE [RecordID] = @p1 AND [CoworkerID] = @p2;
SELECT @@ROWCOUNT;

basically, I just want to update the one record where ‘IsActive’ is true. But the query, because it strips off the ‘IsActive’ property will try and update two or more rows.

Solution :

I found out why.

In my entity I needed to add a data attribute to the ‘IsActive’ property

[Required]
[ConcurrencyCheck]
public bool IsActive { get; set; }

Solution 2:

Just to explain why:

You ask the database for all active users with the specific id and take the first result.
Entity Framework sends the request and materializes the result into an object.
You change the property.
Entity framework will set the state of the object to changed.
You call SaveChanges to signal EF that it sends back the changes to the database.
As it is known which id the object has, it is directly addressed in the update statement.

Those are two operations: SELECT and UPDATE. Those are performed separatly as Entity Framework does not know: What you do in the meantime (until you call SaveChanges) to the entity?

Assigning [ConcurrencyCheck] to the property tells Entity Framework that it should ensure that at the time of the UPDATE the value of property IsActive should be the same as during the SELECT. When there are different applications writing to that database this ensures none of the other applications changed the entity during the time between SELECT and UPDATE.

You should remove the int testCount line. Or request them as Untracked.

[Vue.js] How can I do a two way data biding using date picker?

when trying to use the date picker component from Vuetify. My Date comes from my C# which DateTime is the format. How Can I do a two-way data binding using verify date picker?

I wanna show a previous date a allow the user to change it or not.

Thanks

<v-menu ref=”menu” v-model=”menu” :close-on-content-click=”false” :nudge-right=”40” :return-value.sync=”date” lazy transition=”scale-transition” offset-y full-width min-width=”290px”>

<template v-slot:activator=”{ on }”>

<v-text-field v-model=”**editedItem.activationdate**“ label=”Picker in menu” prepend-icon=”event” readonly v-on=”on”></v-text-field>

</template>

<v-date-picker v-model=”**editedItem.activationdate**“ no-title scrollable>

<v-btn flat color=”primary” @click=”menu = false”>Cancel</v-btn>
<v-btn flat color=”primary” @click=”$refs.menu.save(editedItem.activationdate)”>OK</v-btn>
</v-date-picker>
</v-menu>

Solution :

You have to convert the C# DateTime-object to JavaScript Date-object. In JS you can create the Date object by passing in the number of milliseconds since 1 January 1970 as an int (new Date(0) will give you 1970-01-01). For getting the int value you want you can do this in C#:

date.Subtract(new DateTime(1970, 1,1)).TotalMilliseconds

[Vue.js] Rails data-disable-with equivalent in HTML5/JS/Vue

I’ve been developing on rails in the past and have been using the data-disable-with attribute on buttons for disabling on certain click actions. Is there an out of box solution like this in JS or in native HTML5. I’m developing in VueJS so any vue.js specific solution will be helpful as well.

Solution :

With VueJs:

data() {
return {
disabled: false
}
}

<button @click=”submit” :disabled=”disabled”>Submit</button>

methods: {
submit() {
this.disabled = true;
}
}

[Vue.js] Why Vue.js @input event isn't fired when button is clicked?

Why Vue.js @input event isn’t fired when button is clicked?

When I change count value directly (click on input element and type new value) alert method is fired.

new Vue({
el: “#app”,
data: {
count: 0

},
methods: {
add: function() {
this.count += 1;
},
alert: function() {
alert(‘Count has been changed!’);
}
}
})
<script src=”https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id=”app”>
<input type=”text” v-model.number=”count” @input=”alert”>
<button @click=”add”>+1</button>
</div>

Solution :

You can invoke alert method from inside add method:

add: function() {
this.count += 1;
// invoke alert()
this.alert();
}

Solution 2:

when sure its @change not @input:

<input type=”text” v-model.number=”count” @change=”alert”>

Alternatively:

watch : {

number: function (newVal) {

alert();

}

}

Solution 3:

@input isn’t for any changes to an input tag; it’s specifically triggered when a user directly modifies the input tag. You want something like watch:

new Vue({
el: “#app”,
data: {
count: 0
},
methods: {
add: function() {
this.count += 1
}
},
watch: {
count: function() {
alert(‘Count has been changed!’)
}
}
})
<script src=”https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id=”app”>
<input type=”text” v-model.number=”count” />
<button @click=”add”>+1</button>
</div>

[Vue.js] How to use v-for, for array in computed object

when creating a website to list all of my projects. when using Vuex and Firebase to store all my data.

each project to have its own “todo-list”.
When I create a new project, I create an array witch is my todo-list. In Firebase it looks like this: Screenshot of Firebase

Now to display a list of my projects. First I get my projects as a computed prop like this:

<script>
export default {

computed: {
projects () {
return this.$store.getters.loadedProjects
}
},
created () {
this.$store.dispatch(‘loadProjects’)
},
}

</script>

I can loop through projects and display the title for each project.

My question is: how do I loop through the todo-array inside the computed prop?

<template>
<div v-for=”project in projects” :key=”project.id”>
<p>{ project.title }</p>

<!– Looping through todos (array) in an computed prop –>
<div v-for=”(todo, index) in todos” :key=”todo.id”>
<p>{ project.todos[index].title } </p>
<p>{ project.todos[index].completed } </p>
</div>

</div>
</template>

Tried to use the computed prop inside v-for, but that does not work.
Not sure if I understand the meaning of computed properties. Could I just define projects () inside data () ? and link the getter to the data?

<div v-for=”todo in {project.todos} :key=”todo.id>

Solution :

If the second loop is inside the first one, you could access it this way:

<template>
<div v-for=”project in projects” :key=”project.id”>
<p>{ project.title }</p>

<!– Looping through todos (array) in an computed prop –>
<div v-for=”todo in project.todos” :key=”todo.id”>
<p>{ todo.title } </p>
<p>{ todo.completed } </p>
</div>

</div>
</template>

When you create a loop, in this case, project is a single element of the array, so project.todos is the list of todos of that specific project.

https://vuejs.org/v2/guide/list.html#Mapping-an-Array-to-Elements-with-v-for