Category: Vue Answers

Sometimes, we want to delete a property from a data object with Vue.js.

In this article, we’ll look at how to delete a property from a data object with Vue.js.

Delete a Property from Data Object with Vue.js

To delete a property from a data object with Vue.js, we can use the this.$delete method.

For instance, we can write:

<template>
  <div id="app">
    {{ users }}
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      users: {
        foo: { firstName: "jane", lastName: "smith" },
        bar: { firstName: "john", lastName: "green" },
      },
    };
  },
  mounted() {
    this.$delete(this.users, "foo");
  },
};
</script>

to delete the foo property from the this.users reactive property with the this.$delete method.

The $delete method will trigger Vue’s reactivity to update the this.users object to remove the foo property.

So from the template, we should see that users is now:

{ "bar": { "firstName": "john", "lastName": "green" } }

We can also use the Vue.delete method to do the same thing by writing:

<template>
  <div id="app">
    {{ users }}
  </div>
</template>

<script>
import Vue from "vue";

export default {
  name: "App",
  data() {
    return {
      users: {
        foo: { firstName: "jane", lastName: "smith" },
        bar: { firstName: "john", lastName: "green" },
      },
    };
  },
  mounted() {
    Vue.delete(this.users, "foo");
  },
};
</script>

We just replace this.$delete with Vue.delete .

Conclusion

To delete a property from a data object with Vue.js, we can use the this.$delete method.

We can also use the Vue.delete method to do the same thing.

Sometimes, we want to get the DOM element for the corresponding Vue.js component.

In this article, we’ll look at how to get the DOM element for the corresponding Vue.js component.

Get the DOM Element for the Corresponding Vue.js Component

We can get the root element of the component with the this.$el property.

And to get a child element, we can assign a ref to it and then reference it with this.$refs .

For instance, we can write:

<template>
  <div id="app">
    root element
    <div ref="childElement">child element</div>
  </div>
</template>

<script>
export default {
  name: "App",
  mounted() {
    const rootElement = this.$el;
    const childElement = this.$refs.childElement;
    console.log(rootElement);
    console.log(childElement);
  },
};
</script>

this.$el is the div with ID app .

And we assign the ref prop of the inner div with value childElement .

So we can get the inner div element with this.$refs.childElement .

And the corresponding values are logged in the console log.

Conclusion

We can get the root element of the component with the this.$el property.

And to get a child element, we can assign a ref to it and then reference it with this.$refs .

Sometimes, we want to watch a file input for file selection change events in Vue.js.

In this article, we’ll look at how to watch a file input for file selection change events in Vue.js.

Watch for File Input File Selection Change Events in Vue.js

We can watch a file input for file selection change events in Vue.js by listening to the change event.

To do that, we use the @change directive by writing:

<template>
  <div id="app">
    <input type="file" @change="previewFiles" multiple />
  </div>
</template>

<script>
export default {
  name: "App",
  methods: {
    previewFiles(event) {
      console.log(event.target.files);
    },
  },
};
</script>

Also, we set the value of @change to the previewFiles method.

And then when we select files with the file input, we can get the file list with the selected files with the event.target.files property.

We can also assign a ref to the file input and use that to reference the file input in the method.

To do this, we write:

<template>
  <div id="app">
    <input type="file" ref="myFiles" @change="previewFiles" multiple />
  </div>
</template>

<script>
export default {
  name: "App",
  methods: {
    previewFiles() {
      console.log(this.$refs.myFiles.files);
    },
  },
};
</script>

We set the ref prop to myFiles and then get the selected files with this.$refs.myFiles.files .

Conclusion

We can watch a file input for file selection change events in Vue.js by listening to the change event.

Also, we set the value of @change to the previewFiles method.

Sometimes, we want to display different content for mobile browsers in Vue.js apps.

In this article, we’ll look at how to display different content for mobile browsers in Vue.js apps.

Display Different Content for Mobile Browsers in Vue.js Apps

We can display different content for mobile browsers in Vue.js apps by checking the user agent of the browser to determine whether the browser is a mobile browser and display the content accordingly.

For instance, we can write:

<template>
  <div id="app">
    <div v-if="!isMobile()">desktop</div>
    <div v-else>mobile</div>
  </div>
</template>

<script>
export default {
  name: "App",
  methods: {
    isMobile() {
      return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
        navigator.userAgent
      );
    },
  },
};
</script>

We added the isMobile method which checks the navigator.userAgent string property to see if it has any of the keywords for mobile browsers.

Then in the template, we call the isMobile method in the v-if directive to see if the browser isn’t mobile.

If it isn’t, then we display ‘desktop’, otherwise, we display ‘mobile’ with the v-else directive.

Also, we can check the width of the screen and display content accordingly.

For example, we can write:

<template>
  <div id="app">
    <div v-if="!isMobile">desktop</div>
    <div v-else>mobile</div>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      isMobile: true,
    };
  },
  mounted() {
    this.onResize();
    window.addEventListener("resize", this.onResize, { passive: true });
  },
  methods: {
    onResize() {
      this.isMobile = window.innerWidth < 600;
    },
  },
  beforeDestroy() {
    if (typeof window !== "undefined") {
      window.removeEventListener("resize", this.onResize, { passive: true });
    }
  },
};
</script>

We call addEventListener with 'resize' to listen to the resize event.

If it’s triggered, then we run the onResize method to set the isMobile reactive property according to the screen size.

If window.innerWidth is less than 600, then we set it to true .

Otherwise, we set it to false .

In the beforeDestroy hook, we call window.removeEventListener to remove the resize event listener.

Conclusion

We can display different content for mobile browsers in Vue.js apps by checking the user agent of the browser to determine whether the browser is a mobile browser and display the content accordingly.

Also, we can check the width of the screen and display content accordingly.

Sometimes, we want to change the port number of the dev server of the Vue-CLI project.

In this article, we’ll look at how to change the port number of the dev server of the Vue-CLI project.

Change the Port Number in Vue-CLI Project

We can change the port number of the dev server runs on by adding the port property into vue.config.js in the root folder.

For instance, we can write:

module.exports = {  
  // ...  
  devServer: {  
    open: process.platform === 'darwin',  
    host: '0.0.0.0',  
    port: 8080,  
    https: false,  
    hotOnly: false,  
  },  
  // ...  
}

to add the port property and set it to 8080.

Now the Vue-CLI dev server will run on port 8080.

We can also change the scripts.serve property in package.json to add the port to the serve command.

For instance, we can write:

vue-cli-service serve --port 8080

to set the port of the Vue-CLI dev server to 8080.

Conclusion

We can change the port number of the dev server runs on by adding the port property into vue.config.js in the root folder.