Rendering based on conditions: whether it be components or data

Question

Rendering based on conditions: whether it be components or data

I am currently working on implementing editor functionality for a page using Vue2. The page contains an 'editable' filter which receives a content_id. Based on this content_id, we need to retrieve data from the root Vue instance (e.g. pageContent.mainTitle). Depending on the value of the editModeOn variable in the root, we should either render a component or output the corresponding content (e.g.

<editable content="mainTitle" />

or the content in the mainTitle key).

This is the basic structure of the HTML:

<div id="root">
    {{ 'mainContent' | editable }}

    <label class="checkbox">
        <input type="checkbox" v-model="editModeOn">
        Switch edit mode
    </label>
</div>

Here is an example of the Vue instance:

new Vue({
    el: '#root',
    data: {
        editModeOn: true,
        pageContent: {
            mainTitle: "Test title",
            mainContent: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. At, et!"
        }
    },
    filters: {
        editable(contentId) {
            if (!this.editModeOn) {
                return `<editable content="{{ this.pageContent[contentId] }}" />`;
            } else {
                return this.pageContent[contentId];
            }
        }
    }
});

I decided to utilize filters for this functionality because when edit mode is disabled, I want to avoid adding unnecessary wrappers like span or div.

If there is a better way to achieve the desired functionality, I would appreciate any suggestions. Thank you!

javascript vue.js vuejs2

Answer 1

Answer №1

If my understanding of the issue is correct, one possible solution is to utilize a template. When using a template tag, it will not be displayed on the rendered output.

<div id="main">
    <template v-if="!editingMode">
      {{content['primaryContent']}}
    </template>
    <editable v-else :content="content['primaryContent']" />

    <label class="checkbox">
        <input type="checkbox" v-model="editingMode">
        Toggle Edit Mode
    </label>
</div>

Answer 2

If my understanding of the issue is correct, one possible solution is to utilize a template. When using a template tag, it will not be displayed on the rendered output.

<div id="main">
    <template v-if="!editingMode">
      {{content['primaryContent']}}
    </template>
    <editable v-else :content="content['primaryContent']" />

    <label class="checkbox">
        <input type="checkbox" v-model="editingMode">
        Toggle Edit Mode
    </label>
</div>

Answer 3

Answer №2

Examining the html code, I noticed that the contentId is hardcoded into the div element, suggesting there could be multiple divs like this on the page. My suggestion would be to create a component and pass in a 'content' attribute.
Switching between editing and displaying can be achieved using v-show

Vue.component('editable', {
  template: `
    <div>
      <div v-show="!editModeOn">{{ content }}</div>
      <div v-show="editModeOn">
        <input :value="content" @input="$emit('update:content', $event.target.value)"></input>
      </div>

      <label class="checkbox">
         <input type="checkbox" v-model="editModeOn">
        Switch edit mode
      </label>
    </div>
  `,
  props: ['content'],
  data {
    editModeOn: false
  }
})

Implementation on the main page

<editable :content.sync="pageContent['mainTitle']"></editable>    
<editable :content.sync="pageContent['mainContent']"></editable>

Alternatively,

<editable v-for="item in pageContent" content.sync="item"></editable>

Some points to consider:

Using v-show instead of v-if allows the user to switch between display and edit modes seamlessly. V-show retains the edited content in memory, while v-if removes the edit node altogether.

By utilizing the .sync modifier, changes made in the edits can be propagated upwards to the parent component, refer to .sync

~~This code snippet has not been tested extensively, so minor adjustments may be required. Nevertheless, it conveys the concept effectively.~~ For a live demonstration, visit this CodePen link

Answer 4

Examining the html code, I noticed that the contentId is hardcoded into the div element, suggesting there could be multiple divs like this on the page. My suggestion would be to create a component and pass in a 'content' attribute.
Switching between editing and displaying can be achieved using v-show

Vue.component('editable', {
  template: `
    <div>
      <div v-show="!editModeOn">{{ content }}</div>
      <div v-show="editModeOn">
        <input :value="content" @input="$emit('update:content', $event.target.value)"></input>
      </div>

      <label class="checkbox">
         <input type="checkbox" v-model="editModeOn">
        Switch edit mode
      </label>
    </div>
  `,
  props: ['content'],
  data {
    editModeOn: false
  }
})

Implementation on the main page

<editable :content.sync="pageContent['mainTitle']"></editable>    
<editable :content.sync="pageContent['mainContent']"></editable>

Alternatively,

<editable v-for="item in pageContent" content.sync="item"></editable>

Some points to consider:

Using v-show instead of v-if allows the user to switch between display and edit modes seamlessly. V-show retains the edited content in memory, while v-if removes the edit node altogether.

By utilizing the .sync modifier, changes made in the edits can be propagated upwards to the parent component, refer to .sync

~~This code snippet has not been tested extensively, so minor adjustments may be required. Nevertheless, it conveys the concept effectively.~~ For a live demonstration, visit this CodePen link

Rendering based on conditions: whether it be components or data

Answer №1

Answer №2

Similar questions

Aligning the stars with CSS

Revealing elements with AngularJS ng-show directive prior to concealing them

What could be causing the issue of PHP not receiving this multidimensional array through Ajax?

The installation of npm modules is failing with the error message: "'react-scripts' is not recognized as a valid command, internally or externally."

Select2 script fails to render properly after returning from Action Result

Concealing content to prevent it from being accessed through HTML and JavaScript inspection techniques

The transfer of character data from PHP to jQuery is not successful

When resizing the window, the width change in JQuery always resets to 0

Classes were successfully stored on the icon following the page's refresh

What could be causing my Vue.js project's favicon not to show up?

Can you explain the distinction between mutation and action?

The grid fails to apply remote filtering values when an additional Nested ajax call is incorporated alongside the current HttpProxy configuration

Challenge implementing custom javascript to display categorical/string features on Shiny slider

Retrieve the current date and time in JSON format using moment.js for the local

When it comes to identifying a click outside of an element, the Jquery or Javascript function may encounter some challenges specifically with Internet Explorer

Invoking a function within a loop disrupts its flow

Utilize Angular 2 interceptor to incorporate HTTP requests

Prettier eliminates the need for parentheses in mathematical expressions

How can I disable the onClick event for an image within a div in an onClick function?

Styling div elements to match the dimensions of table rows in CSS