JSFiddle - React, Tailwind, and code Playground

by khaled_developer

HTML

<div id="editor">
<input type='text' placeholder="Value" id="newValue"/>
<input type='text' placeholder="index" id="indexValue"/>
<button id='SubmitValue'>Submit</button>
</div>
<ul id="tab">
  <my-li v-for="name in names">{{name}}</my-li>
</ul>

CSS

html *:focus, html *:focus-visible{
  outline: unset !important;
  outline-offset: 0 !important;
}
#editor{
  width: 90%;
  margin: auto;
  display: flex;
  border: 1px solid red;
  border-radius: 100px;
}
#editor *{
  margin: 0 !important;
  padding: 0;
}
#editor #newValue{
  width: 50%;
  padding: 5px 10px;
  border-radius: 100px 0 0 100px;
  border: 0;
}
#editor #indexValue{
  width: 20%;
  padding: 5px 10px;
  border: 0;
  border-left: 1px solid #e0e0e0;
}
#editor #SubmitValue{
  width: 30%;
  padding: 5px 10px;
  border: 0;
  border-left: 1px solid #e0e0e0;
  border-radius: 0 100px 100px 0;
  background: #c2185b;
  color: #fff;
  font-weight: bold;
}

JavaScript

let Mycomponent = Vue.component("my-li",{
       props:['my-name'],
       template:"<li>{{myName}}<slot></slot></li>"
    });
    var vw = new Vue({
      el:"#tab",
      data:{
        names:['ali','reza','matin','mehdi','ahora','me']  
      },
      methods:{
     		  changeList:function(myList,index,newVal){
      	          let backupList = this.names;
                  backupList[index] = newVal;
                  this.names = []
                  this.names = backupList;
     			}
      },
      component:[Mycomponent]
      })
//Editor Codes 
     var xt50fkp = document.getElementById("newValue")
     var lek4ml3 = document.getElementById("indexValue")
     var odc034c = document.getElementById("SubmitValue")
     odc034c.addEventListener("click",function(){
        let newVal = xt50fkp.value
        let index = lek4ml3.value
        vw.changeList(vw.names,index,newVal)
     })