`In Vue.js, it is not possible to access a data property within a

Question

`In Vue.js, it is not possible to access a data property within a

I encountered an issue while attempting to utilize a property of my data within a computed method in the following manner:

data() {
    return {
      ToDoItems: [
        { id: uniqueId("todo-"), label: "Learn Vue", done: false },
        {
          id: uniqueId("todo-"),
          label: "Create a Vue project with the CLI",
          done: true,
        },
        { id: uniqueId("todo-"), label: "Have fun", done: true },
        { id: uniqueId("todo-"), label: "Create a to-do list", done: false },
      ],
    };
  },
computed: {
listSummary() {
  const numberFinishedItems = this.ToDoItems.filter((item) => item.done)
    .length;
  return `${numberFinishedItems} out of ${this.ToDoItems.length} items completed`;
},
},

However, both the IDE (Visual Studio Code) and the compiler raised an error:

Property 'ToDoItems' does not exist on type 'ComponentPublicInstance<{}, {}, {}, {}, {}, EmitsOptions, {}, {}, false, ComponentOptionsBase<{}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, EmitsOptions, string, {}>>'.

I'm currently following the vue.js tutorial provided by Mozilla (here) but using version 3 of Vue.js.

Could there have been any changes that would make this operation no longer feasible or require a different approach?

Thank you in advance.

Here is the complete code snippet:

<template>
  <div id="app">
    <h1>To-Do List</h1>
    <to-do-form @todo-added="addToDo"></to-do-form>
    <h2 id="list-summary">{{ listSummary }}</h2>
    <ul aria-labelledby="list-summary" class="stack-large">
      <li v-for="item in ToDoItems" :key="item.id">
        <to-do-item :label="item.label" :done="true" :id="item.id"></to-do-item>
      </li>
    </ul>
  </div>
</template>

<script lang="ts">
import uniqueId from "lodash.uniqueid";
import { defineComponent } from "vue";
import ToDoItem from "./components/ToDoItem.vue";
import ToDoForm from "./components/ToDoForm.vue";

export default defineComponent({
  name: "App",
  components: {
    ToDoItem,
    ToDoForm,
  },
  data() {
    return {
      ToDoItems: [
        { id: uniqueId("todo-"), label: "Learn Vue", done: false },
        {
          id: uniqueId("todo-"),
          label: "Create a Vue project with the CLI",
          done: true,
        },
        { id: uniqueId("todo-"), label: "Have fun", done: true },
        { id: uniqueId("todo-"), label: "Create a to-do list", done: false },
      ],
    };
  },
  methods: {
    addToDo(toDoLabel: string) {
      this.ToDoItems.push({
        id: uniqueId("todo-"),
        label: toDoLabel,
        done: false,
      });
    },
  },
  computed: {
    listSummary() {
      const numberFinishedItems = this.ToDoItems.filter((item) => item.done)
        .length;
      return `${numberFinishedItems} out of ${this.ToDoItems.length} items completed`;
    },
  },
});
</script>

<style>
/* Global styles */
.btn {
  padding: 0.8rem 1rem 0.7rem;
  border: 0.2rem solid #4d4d4d;
  cursor: pointer;
  text-transform: capitalize;
}
.btn__danger {
  color: #fff;
  background-color: #ca3c3c;
  border-color: #bd2130;
}
.btn__filter {
  border-color: lightgrey;
}
.btn__danger:focus {
  outline-color: #c82333;
}
.btn__primary {
  color: #fff;
  background-color: #000;
}
.btn-group {
  display: flex;
  justify-content: space-between;
}
.btn-group > * {
  flex: 1 1 auto;
}
.btn-group > * + * {
  margin-left: 0.8rem;
}
.label-wrapper {
  margin: 0;
  flex: 0 0 100%;
  text-align: center;
}
[class*="__lg"] {
  display: inline-block;
  width: 100%;
  font-size: 1.9rem;
}
[class*="__lg"]:not(:last-child) {
  margin-bottom: 1rem;
}
@media screen and (min-width: 620px) {
  [class*="__lg"] {
    font-size: 2.4rem;
  }
}
.visually-hidden {
  position: absolute;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px 1px 1px 1px);
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}
[class*="stack"] > * {
  margin-top: 0;
  margin-bottom: 0;
}
.stack-small > * + * {
  margin-top: 1.25rem;
}
.stack-large > * + * {
  margin-top: 2.5rem;
}
@media screen and (min-width: 550px) {
  .stack-small > * + * {
    margin-top: 1.4rem;
  }
  .stack-large > * + * {
    margin-top: 2.8rem;
  }
}
/* End global styles */
#app {
  background: #fff;
  margin: 2rem 0 4rem 0;
  padding: 1rem;
  padding-top: 0;
  position: relative;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 2.5rem 5rem 0 rgba(0, 0, 0, 0.1);
}
@media screen and (min-width: 550px) {
  #app {
    padding: 4rem;
  }
}
#app > * {
  max-width: 50rem;
  margin-left: auto;
  margin-right: auto;
}
#app > form {
  max-width: 100%;
}
#app h1 {
  display: block;
  min-width: 100%;
  width: 100%;
  text-align: center;
  margin: 0;
  margin-bottom: 1rem;
}
</style>

javascript typescript vue.js vuejs3

Answer 1

Answer №1

Brahim Boussadjra's response is "alright", however, it fails to directly address the issue at hand. user16362509 seems to be on the right track, but falls short of answering the specific question. The key here is to properly annotate the return types of both data properties and computed properties in order for TypeScript to properly understand the code. By providing explicit type annotations, you not only ensure stricter type checking but also enhance code clarity. While this issue may not arise when utilizing Vue3's composition API correctly, it does exist within the options API as observed. It is recommended to add annotations for better understanding and maintenance of the codebase. Interestingly, when specifying the return type of a computed method, Vue exhibits some quirks, yet it is considered good practice to make types explicit.

<script lang="ts">
import uniqueId from "lodash.uniqueid";
import { defineComponent } from "vue";
import ToDoItem from "./components/ToDoItem.vue";
import ToDoForm from "./components/ToDoForm.vue";

export default defineComponent({
  name: "App",
  components: {
    ToDoItem,
    ToDoForm,
  },
  data(): { ToDoItems: Array<{id: *string*, label: string, done: boolean}> } {
    return {
      ToDoItems: [
        { id: uniqueId("todo-"), label: "Learn Vue", done: false },
        {
          id: uniqueId("todo-"),
          label: "Create a Vue project with the CLI",
          done: true,
        },
        { id: uniqueId("todo-"), label: "Have fun", done: true },
        { id: uniqueId("todo-"), label: "Create a to-do list", done: false },
      ],
    };
  },
  methods: {
    addToDo(toDoLabel: string): void {
      this.ToDoItems.push({
        id: uniqueId("todo-"),
        label: toDoLabel,
        done: false,
      });
    },
  },
  computed: {
    listSummary(): string {
      const numberFinishedItems = this.ToDoItems.filter((item) => item.done)
        .length;
      return `${numberFinishedItems} out of ${this.ToDoItems.length} items completed`;
    },
  },
});
</script>

Answer 2

Brahim Boussadjra's response is "alright", however, it fails to directly address the issue at hand. user16362509 seems to be on the right track, but falls short of answering the specific question. The key here is to properly annotate the return types of both data properties and computed properties in order for TypeScript to properly understand the code. By providing explicit type annotations, you not only ensure stricter type checking but also enhance code clarity. While this issue may not arise when utilizing Vue3's composition API correctly, it does exist within the options API as observed. It is recommended to add annotations for better understanding and maintenance of the codebase. Interestingly, when specifying the return type of a computed method, Vue exhibits some quirks, yet it is considered good practice to make types explicit.

<script lang="ts">
import uniqueId from "lodash.uniqueid";
import { defineComponent } from "vue";
import ToDoItem from "./components/ToDoItem.vue";
import ToDoForm from "./components/ToDoForm.vue";

export default defineComponent({
  name: "App",
  components: {
    ToDoItem,
    ToDoForm,
  },
  data(): { ToDoItems: Array<{id: *string*, label: string, done: boolean}> } {
    return {
      ToDoItems: [
        { id: uniqueId("todo-"), label: "Learn Vue", done: false },
        {
          id: uniqueId("todo-"),
          label: "Create a Vue project with the CLI",
          done: true,
        },
        { id: uniqueId("todo-"), label: "Have fun", done: true },
        { id: uniqueId("todo-"), label: "Create a to-do list", done: false },
      ],
    };
  },
  methods: {
    addToDo(toDoLabel: string): void {
      this.ToDoItems.push({
        id: uniqueId("todo-"),
        label: toDoLabel,
        done: false,
      });
    },
  },
  computed: {
    listSummary(): string {
      const numberFinishedItems = this.ToDoItems.filter((item) => item.done)
        .length;
      return `${numberFinishedItems} out of ${this.ToDoItems.length} items completed`;
    },
  },
});
</script>

Answer 3

Answer №2

With Vue 3 already in use, consider leveraging the composition API along with script setup for enhanced support of TypeScript.

Check out the live demo

<template>
  <div id="app">
    <h1>To-Do List</h1>
    <form @submit.prevent="addToDo">
      <input type="text" ref="label" />
      <button type="submit">Add</button>
    </form>
    <h2 id="list-summary">{{ listSummary }}</h2>
    <ul aria-labelledby="list-summary" class="stack-large">
      <li v-for="item in ToDoItems" :key="item.id">
        <input type="checkbox" v-model="item.done" />
        {{ item.id }} {{ item.label }}
      </li>
    </ul>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
interface ToDoItem {
  id: string;
  label: string;
  done: boolean;
}
const label = ref(null)
const ToDoItems = ref<ToDoItem[]>([
  { id: 1, label: 'Learn Vue', done: false },
  { id: 2, label: 'Create a Vue project with the CLI', done: true },
  { id: 3, label: 'Have fun', done: true },
  { id: 4, label: 'Create a to-do list', done: false },
]);
const addToDo = () => {
  ToDoItems.value.push({
    id: ToDoItems.value.length + 1,
    label: label.value.value,
    done: false,
  });
  label.value.value = '';
};
const listSummary = computed(() => {
  return `${ToDoItems.value.filter((item) => item.done).length} out of ${ToDoItems.value.length} items completed`;
});
</script>

Answer 4

With Vue 3 already in use, consider leveraging the composition API along with script setup for enhanced support of TypeScript.

Check out the live demo

<template>
  <div id="app">
    <h1>To-Do List</h1>
    <form @submit.prevent="addToDo">
      <input type="text" ref="label" />
      <button type="submit">Add</button>
    </form>
    <h2 id="list-summary">{{ listSummary }}</h2>
    <ul aria-labelledby="list-summary" class="stack-large">
      <li v-for="item in ToDoItems" :key="item.id">
        <input type="checkbox" v-model="item.done" />
        {{ item.id }} {{ item.label }}
      </li>
    </ul>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
interface ToDoItem {
  id: string;
  label: string;
  done: boolean;
}
const label = ref(null)
const ToDoItems = ref<ToDoItem[]>([
  { id: 1, label: 'Learn Vue', done: false },
  { id: 2, label: 'Create a Vue project with the CLI', done: true },
  { id: 3, label: 'Have fun', done: true },
  { id: 4, label: 'Create a to-do list', done: false },
]);
const addToDo = () => {
  ToDoItems.value.push({
    id: ToDoItems.value.length + 1,
    label: label.value.value,
    done: false,
  });
  label.value.value = '';
};
const listSummary = computed(() => {
  return `${ToDoItems.value.filter((item) => item.done).length} out of ${ToDoItems.value.length} items completed`;
});
</script>

`In Vue.js, it is not possible to access a data property within a

Answer №1

Answer №2

Similar questions

Issue with Flex property not being supported in Safari browser

Tips for integrating Material UI with useRef

"Every time you run mat sort, it works flawlessly once before encountering an

Do you have any recommendations for a jQuery plugin that can create a sleek horizontal scrolling image gallery?

Understanding the mechanism of callback function in NodeJS within the context of routes and controllers

Having trouble with Vuex in Vue JS when trying to set up a modular store

Unpacking Objects in JavaScript and TypeScript: The Power of Destructuring

Set the class of the list item to "active" class

Creating an interactive table with the power of FPDF and PHP

c# JavaScriptConverter - understanding the deserialization of custom properties

Is there a way to utilize Angular in identifying whether a given value corresponds with the value of a particular radio button within my application?

Encountering a 415 Error while making an ajax call using formData

Ways to retrieve the initial key object received through an AJAX request

Is there a way to restrict the type of the value returned by URLSearchParams.get() to a specific union type?

Leverage AngularJS $http.get method to continuously fetch JSON array upon scrolling

What happens to the content within a <textarea> element if it is not enclosed between the opening and closing tags?

In a Django template, implement a checkbox feature in the list view to select multiple objects. Retrieve all selected checkbox objects for each pagination and display them in

Unable to connect to React Node Socket.IO application from any source other than localhost using IPv4 and NGROK

Error message in JavaScript saying "The response string is undefined

Children cannot access parent prop if the prop is null