link1233 link1234 link1235 link1236 link1237 link1238 link1239 link1240 link1241 link1242 link1243 link1244 link1245 link1246 link1247 link1248 link1249 link1250 link1251 link1252 link1253 link1254 link1255 link1256 link1257 link1258 link1259 link1260 link1261 link1262 link1263 link1264 link1265 link1266 link1267 link1268 link1269 link1270 link1271 link1272 link1273 link1274 link1275 link1276 link1277 link1278 link1279 link1280 link1281 link1282 link1283 link1284 link1285 link1286 link1287 link1288 link1289 link1290 link1291 link1292 link1293 link1294 link1295 link1296 link1297 link1298 link1299 link1300 link1301 link1302 link1303 link1304 link1305 link1306 link1307 link1308 link1309 link1310 link1311 link1312 link1313 link1314 link1315 link1316 link1317 link1318 link1319 link1320 link1321 link1322 link1323 link1324 link1325 link1326 link1327 link1328 link1329 link1330 link1331 link1332 link1333 link1334 link1335 link1336 link1337 link1338 link1339 link1340 link1341 link1342 link1343 link1344 link1345 link1346 link1347 link1348 link1349 link1350 link1351 link1352 link1353 link1354 link1355 link1356 link1357 link1358 link1359 link1360 link1361 link1362 link1363 link1364 link1365 link1366 link1367 link1368 link1369

[Vue.js] Changing object from external file

when learning vue.js and before that there is some experience working with React.

As, I move on comprehending the basics of vue, I sort of compare things with JS

<template>
<div id=”app”>
<HelloWorld msg=”Below This we will inclue our To-do task list”/>
<p>{msg}</p>
<Todos :toDoItem=”todos”/>
</div>
</template>

import Todos from “./components/todo.vue”;
let todo =
{
name: “Rohit”,
title: “Full Stack Developer”,
completed: true
}

export default {
name: “app”,
components: {
HelloWorld,
Todos
},
data() {
return {
msg: “hello”,
todos: todo
};
}
};

We are passing the props here to child component and changing it using method

<template>
<div>
<div class=”main-class”>
<p>{toDoItem.title}</p>
<input type=”checkbox” v-on:change=”markComplete”>
</div>
</div>
</template>

<script>
export default {
name: “toDoItem”,
props: {
toDoItem: {
type: Object
}
},
method: {
markComplete() {
this.toDoItem.complete = !this.toDoItem.complete
}

};
</script>

This is where when unable to comprehend many things.

Question 1: Based on my understanding of this, shouldn’t it point to a global space and hence this should be undefined?

markComplete() {
this.toDoItem.complete = !this.toDoItem.complete
}

Question 2: In react we can’t change props passed to a child object probably? but here we are changing the props? Also, In general, if we declare a object in another file (app.js), can we change it to in another file (someApp.js)?

Solution :

All methods in a vue.js instance are bound to the instance so that this works properly.

You should not be changing props. Here, you are changing a member of a prop — toDoItem is a prop, and complete is a member of it — which is not controlled, but you still should not do it. You should instead emit an event that the parent handles.

the markComplete should be in the parent, since it owns the data being manipulated. It would look like:

markComplete() {
this.todos.complete = !this.todos.complete;
}

In the child, the method would be something like

toggleComplete() {
this.$emit(‘toggle’);
}

And the parent would use v-on to handle the toggle event:

<Todos :toDoItem=”todos” v-on:toggle=”markComplete”/>

This way all the code that manipulates data owned by a component happens within that component. Nobody calls anybody else’s methods or modifies their data.

I think you intend for todos to be an array of items, and probably want to v-for over them, having one child component for each item, but that’s another issue.

I cannot answer the last question about objects declared in different files, because I don’t understand it. It is not unusual to import objects and modify them, generally. As I mentioned, though, vue.js components should be the only ones to modify their own data.