Welcome to Jonic Developer Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
761 views
in Technique[技术] by (71.8m points)

alpine.js - Create repetitive form elements using JavaScript or alpineJS

Is there a way to get the HTML content duplicated replacing rice with every element of the foods array without using document.write or even jQuery ? Is innerHTML the only way out ? Maybe this is possible to achieve using a reactive library like alpineJS ? (I can't use npm etc)

let food = ['rice', 'wheat', 'ragi', 'maida', 'red gram dhal', 'black gram dhal', 'bengal gram', 'horse gram', 'drumstick leaves', 'cabbage', 'manathakali', 'curry leaves', 'carrot', 'beetroot', 'potato', 'yam', 'Beans', 'brinjal', 'cauliflower', 'ladies finger', 'bitter gourd', 'tomato', 'apple', 'banana', 'grapes', 'guava', 'orange', 'cow milk', 'curd', 'butter milk', 'ghee', 'butter', 'paneer', 'chicken', 'mutton', 'egg', 'fish', 'almond', 'cashew nut', 'sesame', 'ground nut', 'coconut', 'coconut oil', 'sunflower oil', 'gingelly oil', 'groundnut oil', 'palm oil', 'sugar', 'jaggery', 'honey'];
<div class="form-group row">
    <label for="what-beverage" class="col-sm-4 col-form-label">Rice</label>
    <div class="col-sm-8 mt-2">
        <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="rice" id="rice-daily" value="daily" />
            <label class="form-check-label" for="rice-daily">Daily</label>
        </div>
        <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="rice" id="rice-weekly" value="weekly" />
            <label class="form-check-label" for="rice-weekly">Weekly</label>
        </div>
        <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="rice" id="rice-fortnightly" value="fortnightly" />
            <label class="form-check-label" for="rice-fortnightly">Fortnightly</label>
        </div>
        <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="rice" id="rice-occasionally" value="occasionally" />
            <label class="form-check-label" for="rice-occasionally">Occasionally</label>
        </div>
        <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="rice" id="rice-never" value="never" />
            <label class="form-check-label" for="rice-never">Never included</label>
        </div>
    </div>
</div>

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

With Alpine.js you could do (assuming you want a frequency radio button for each frequency and food):

<script>
  const foods = [{
    label: 'Rice',
    value: 'rice'
  }, {
    label: 'Wheat',
    value: 'wheat'
  }, 
    // so on for each food
  ];
  const frequencies = [{
    value: 'daily',
    label: 'Daily'
  }, {
    value: 'weekly',
    label: 'Weekly'
  }, {
    value: 'fortnightly',
    label: 'Fortnightly'
  }, {
    value: 'occasionally',
    label: 'Occasionally'
  }, {
    value: 'never',
    label: 'Never'
  }];
</script>
<div x-data="{ foods: foods, frequencies: frequencies }" class="form-group row">
  <div class="col-sm-8 mt-2">
    <template x-for="food in foods">
      <div>
        <label for="what-beverage" class="col-sm-4 col-form-label" x-text="food.label"></label>
        <template x-for="frequency in frequencies">
          <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" x-bind:name="food.value" x-bind:id="`${food.value}-${frequency.value}`" x-bind:value="frequency.value" />
            <label class="form-check-label" x-bind:for="`${food.value}-${frequency.value}`" x-text="frequency.label"></label>
          </div>
        </template>
      </div>
    </template>
  </div>
</div>

I've got a working codepen that you can check out at https://codepen.io/hugodf/pen/yLaRXvm


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to Jonic Developer Community for programmer and developer-Open, Learning and Share
...