In Vue, the method of prohibiting editing

In Vue, the method of prohibiting editing: take the prohibition of editing the input box as an example. The following are several common methods to achieve the effect of prohibiting editing input boxes in Vue:

1. Use readonlyproperty: In Vue, you can readonlydisable editing input box by binding property. Set readonlyto true, the effect of prohibiting editing can be realized. For example:

<input type="text" :readonly="true">

 Or, if using Element UI's el-inputcomponent:

<el-input v-model="value" :readonly="true"></el-input>

 2. Use disabledattribute: Similar to native HTML, input box components in Vue usually support disabledattribute. By disabledsetting to true, the input box is disabled and the user is prevented from editing it. For example:

<input type="text" :disabled="true">

<el-input v-model="value" :disabled="true"></el-input>

3. Use computed properties or variables to control the editing state: You can use Vue's computed properties or data variables to control the editing state of the input box. Editing of input boxes can be dynamically enabled or disabled by setting the value of a variable based on certain conditions. For example:

<input type="text" :value="inputValue" :readonly="isReadOnly">


export default {
  data() {
    return {
      inputValue: "可编辑数据",
      isReadOnly: true,
    };
  },
};

It can be used in combination with isView and the like for display. For example, the new page needs to display this input, but the view does not.

 :readonly="isView" 

   <el-form-item
            label="操作时间"
            prop="createTime"
            v-if="dialogStatus === 'view'"
          >
            <el-input
              v-model="form.createTime"
              placeholder=""
              :disabled="dialogStatus === 'view'"
            />
          </el-form-item>